Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
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>
 
Old February 2nd, 2010, 07:25 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
Old February 2nd, 2010, 07:41 AM
Registered User
 
Join Date: Aug 2009
Posts: 7
Thanks: 2
Thanked 1 Time in 1 Post
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
 
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?
 
Old February 2nd, 2010, 08:10 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
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?!?
 
Old February 2nd, 2010, 11:35 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
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!





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 06:09 AM
Background Image problem in DIV tag. cumminsj CSS Cascading Style Sheets 6 September 15th, 2006 03:02 AM
background image for <div> anshul CSS Cascading Style Sheets 4 May 16th, 2005 11:00 AM





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