p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   ASP.NET 3.5 Basics (http://p2p.wrox.com/forumdisplay.php?f=351)
-   -   DIV CSS background-image does not display (http://p2p.wrox.com/showthread.php?t=78056)

StevenF February 2nd, 2010 07:17 AM

DIV CSS background-image does not display
 
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 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 February 2nd, 2010 07:41 AM

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



try this

StevenF 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 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 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 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 February 2nd, 2010 06:22 PM

That's very useful - thanks very much!


All times are GMT -4. The time now is 02:15 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.