Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 3.5 Basics If you are new to ASP or ASP.NET programming with version 3.5, this is the forum to begin asking questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Basics section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 2nd, 2010, 07:17 AM
Authorized User
 
Join Date: Apr 2009
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Default 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>
  #2 (permalink)  
Old February 2nd, 2010, 07:25 AM
Imar's Avatar
Wrox Author
Points: 71,796, Level: 100
Points: 71,796, Level: 100 Points: 71,796, Level: 100 Points: 71,796, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,036
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
  #3 (permalink)  
Old February 2nd, 2010, 07:41 AM
Registered User
 
Join Date: Aug 2009
Posts: 7
Thanks: 2
Thanked 1 Time in 1 Post
Send a message via Skype™ to prathibashanmugam
Default 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
  #4 (permalink)  
Old February 2nd, 2010, 07:54 AM
Authorized User
 
Join Date: Apr 2009
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Default

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?
  #5 (permalink)  
Old February 2nd, 2010, 08:10 AM
Imar's Avatar
Wrox Author
Points: 71,796, Level: 100
Points: 71,796, Level: 100 Points: 71,796, Level: 100 Points: 71,796, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,036
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
  #6 (permalink)  
Old February 2nd, 2010, 10:39 AM
Authorized User
 
Join Date: Apr 2009
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Default

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?!?
  #7 (permalink)  
Old February 2nd, 2010, 11:35 AM
Imar's Avatar
Wrox Author
Points: 71,796, Level: 100
Points: 71,796, Level: 100 Points: 71,796, Level: 100 Points: 71,796, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,036
Thanks: 80
Thanked 1,580 Times in 1,557 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
  #8 (permalink)  
Old February 2nd, 2010, 06:22 PM
Authorized User
 
Join Date: Apr 2009
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Default

That's very useful - thanks very much!
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Background image in DIV not displaying creative_eye CSS Cascading Style Sheets 3 December 31st, 2009 04:05 PM
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
background image width through CSS problem inOpera iamrakesh22 CSS Cascading Style Sheets 0 May 31st, 2007 07:09 AM
Background Image problem in DIV tag. cumminsj CSS Cascading Style Sheets 6 September 15th, 2006 04:02 AM
background image for <div> anshul CSS Cascading Style Sheets 4 May 16th, 2005 12:00 PM



All times are GMT -4. The time now is 04:34 AM.


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