DIV CSS background-image does not display

StevenF · #1 (**permalink**) February 2nd, 2010, 07:17 AM

I am unable to set a DIV background image using CSS. I have tried to set several images, and imagetypes (.gif, .png, .jpeg) as DIV background images, using several different techniques (applying a CSS class to the DIV, applying a CSS DIV element ID, and setting the background-image style of the DIV directly). With all these attemps, the result is the same: all I end up with is a blank background. I am sure (I sincerely hope!!) that I am missing something really basic. Here's my code - any suggestions for what's going wrong would be much appreciated:

CSS code

Code:

#BackgroundTest   
{   
    background-image: url('Images/keys.jpeg');   
    background-repeat: repeat;   
}   
.BackgroundTestClass   
{   
    background-image: url('Images/keys.jpeg');   
    background-repeat: repeat;   
}

ASP.NET code

Code:

<head runat="server">
    <title></title>
    <link href="../Styles/TestStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="BackgroundTest">
        Some test text
    </div>
    
    <div class="BackgroundTestClass">
        Some more test text
    </div>
    
    <div style="background-image: url(Images/keys.jpeg);">
        Even more test text
    </div>
    
    </form>
</body>

Imar · #2 (**permalink**) February 2nd, 2010, 07:25 AM

Is the path to the image correct? Is the image located in a folder called Images *relative* to the CSS file?

How does your site's structure look?

Imar

prathibashanmugam · #3 (**permalink**) February 2nd, 2010, 07:41 AM

#BackgroundTest
{
background-image: url('../Images/keys.jpeg');
background-repeat: repeat;
}
.BackgroundTestClass
{
background-image: url('../Images/keys.jpeg');
background-repeat: repeat;
}

try this

StevenF · #4 (**permalink**) February 2nd, 2010, 07:54 AM

Yep, you were both right: it was indeed a path problem. With url('../Images/keys.jpeg') it works fine. Many thanks!

Just to clarify my understanding: Am I correct in assuming that the path to images referenced in a CSS file has to be set relative to the CSS file location, not to the path of the page where the style is consumed?

Imar · #5 (**permalink**) February 2nd, 2010, 08:10 AM

Yes, correct. Images are looked for relative to the location of the CSS file.

You can use root based paths, which will work regardless of the location of the CSS file:

background-image: url(/Images/SomeImage.gif);

will always be looked for in a folder called Images in the root....

Hope this helps,

Imar

StevenF · #6 (**permalink**) February 2nd, 2010, 10:39 AM

OK, on the bright side, I can get what I need to work to actually work.
On the less bright side - I'm confused:
The root of my application is

/JobProfilingWebApp.

Then I have the folders
/JobProfilingWebApp/Images
/JobProfilingWebApp/Styles

In the "/Images" folder I have a "keys.jpeg" file.

When I use
background-image: url(../Images/keys.jpeg); or
background-image: url(/JobProfilingWebApp/Images/keys.jpeg);

the file is displayed as the background, as I expect.

But when I use either of
background-image: url(/Images/keys.jpeg); or
background-image: url(~/Images/keys.jpeg);

I don't get the background image.

However, when I put a label on the page and use this code to check which path the url "~/Images/keys.jpeg" resolves to

Code:

        Dim Path As String
        Path = Me.ResolveUrl("~/Images/keys.jpeg")
        Label1.Text = Path

the path returned is
/JobProfilingWebApp/Images/keys.jpeg

So: "~/Images/keys.jpeg" doesn't work, even though it resolves to "/JobProfilingWebApp/Images/keys.jpeg", which, when set explicitly, actually does work?!?

Imar · #7 (**permalink**) February 2nd, 2010, 11:35 AM

Quote:

background-image: url(/Images/keys.jpeg); or
background-image: url(~/Images/keys.jpeg);

The first path doesn't work as it points to your server root, not your application's root. The second path doesn't work as these virtual paths resolve within ASP.NET only and not in CSS.

Hope this helps

Imar

StevenF · #8 (**permalink**) February 2nd, 2010, 06:22 PM

That's very useful - thanks very much!

Need to download code?

Navigation