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:

<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />

The image I plan to display is in my ~/Content/Images/Designs.png

Here is what I have tried

body
{
    background-image: url(~/Content/Images/designs.png); 
    background-repeat: repeat;  
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

Other Tries Included:

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

none of the above tries worked. What can I do?

Answer 1

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.