CSS url path incorrect with MVC 3

Question

I have this:

body {
    background-image: url("Images/Background.jpg");
}

But the url it generates is incorrect no matter what variation I use.

When I run my website, the url is localhost/MYSITE as it's plonking it on a local IIS server (not iisexpress).

The image is stored in a folder called Images on the root of the application.

if I inspect the element this is what I get:

background-image: url("Images/Background.jpg");

gives

url("http://localhost/MYSITE/Styles/Images/Background.jpg")

I don't know where the Styles comes from.

background-image: url("/Images/Background.jpg");

gives

url("/Images/Background.jpg")

Which is wrong since it needs to be MYSITE/Images.

background-image: url("~/Images/Background.jpg");

gives

url("http://localhost/MYSITE/Styles/~/Images/Background.jpg")

Styles is the location of the LESS file so I guess that is sorta why?

background-image: url("~/../Images/Background.jpg");

gives

url("http://localhost/MYSITE/Styles/Images/Background.jpg")

What is going on?! Why does it keep doing these weird things?

When I deploy to live it will no longer be IP/MYSITE it will be mysite.mydomain.com so I have to get the relative pathing correct.

Resource paths tend to get tricky using MVC3 and Less. To keep things simple, try keeping resource URL's away from includes and relative to the .less file you're using them in. Several less implementations also seem to have problems with relative paths in includes in general. (see github.com/madskristensen/WebEssentials2013/issues/134 ) for instance — Timothy Groote
– Timothy Groote, Commented Mar 11, 2014 at 11:47

Hashem Qolami · Accepted Answer · 2014-03-11 11:51:38Z

2

If you give url of image in css it path start right from the folder where your css is so if your css file is inside Styles folder and you give background-image url as

url("/Images/Background.jpg");

localhost/MYSITE/Styles/Images/Background.jpg

because your folder structure is like this

Root
  Styles
  Images

so if you want to point some image in the Images folder from your css file in Styles folder you should write like this

url("../Images/Background.jpg");

It means go to the parent folder that is Root and then Images and then Background.jpg

edited Mar 11, 2014 at 11:51

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

answered Mar 11, 2014 at 11:49

Ravi Kumar

9931 gold badge12 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NibblyPig Over a year ago

I see, so when using url() in CSS you should avoid "~/blahblah" ?

Collectives™ on Stack Overflow

CSS url path incorrect with MVC 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related