CSS Background-Image refuses to display in ASP.Net MVC

Question

I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:

Answer 1

I would recommend to just drag and drop the image. Visual Studio will generate the code automatically for you,

body { background-image: url('../../Content/Images/dark123.jpg'); }

This URL code is auto-generated by Visual Studio you don't need to write the code manually.

Hope this will fix your issue.

Cheers!

Answer 2

It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.

Answer 3

The url inside a CSS file is relative to the location of the CSS file.

So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:

background-image: url(../images/foo.png); 

Don't use any ~ inside a CSS file. It has no meaning.

So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:

background-image: url(images/designs.png); 

If this doesn't work for you there might be different causes:

• The image doesn't exist at that location
• You didn't specify width and height to the containing element so you don't see the image

What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.

Answer 4

This is what I had to do:

background-image: url('@Url.Content("~/images/foo.png")')