CSS background image trouble! please help...m a newbie!

Home ›

ASP.NET Forums » General ASP.NET » Master Pages, Themes and Navigation Controls » CSS background image trouble! please help...m a newbie!

Shortcuts

Previous Next

CSS background image trouble! please help...m a newbie!

Last post 05-13-2008 5:31 PM by mandeep123. 5 replies.

Sort Posts:

CSS background image trouble! please help...m a newbie!

05-10-2008, 4:03 PM

Contact

1 point Member
mandeep123
Member since 11-12-2007, 10:12 PM
Bangalore
Posts 21

Hi,...

i am using Css to get a background image for my header in my default.aspx file but its just not showing up in the design view, not even when i view it in IE. please help.

this is my css :

body
{
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 1%;
	margin: 0%;
	padding-top: 1%;
	height: 98%;
	background-color: #cc9966;
	text-align: center;
}
#headerGraphic
{
	background-image: url(Images/bannerfinal2.jpg);
	clear: both;
	float: none;
	width: 700px;
	height: 246px;
}

and this my default.aspx file

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    p
    {
        text-align: justify;
    }
    .centerAlign
    {
        text-align: center;
    }
</style>
    <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="headerGraphic"></div>
    <div id="navigationArea">| link1 | link2 | link3 |</div>
    <div id="bodyArea">
    <div id="bodyLeft">left text</div>
    <div id="bodyRight">right text</div>
    </div>
    <div id="footerArea">Copyright 2008 - 2009: MySite, Inc.</div>

    </div>
    </form>
</body>
</html>

Re: CSS background image trouble! please help...m a newbie!

05-10-2008, 7:03 PM

Contact

1,401 point Participant
avidyarthi
Member since 09-20-2006, 2:00 PM
California
Posts 288

You might want to try:

background-image: url(../Images/bannerfinal2.jpg);

 instead of

background-image: url(Images/bannerfinal2.jpg);

depending on where your Images folder is placed.

Hope this helps.

Thanks,

avidyarthi.

Re: CSS background image trouble! please help...m a newbie!

05-10-2008, 7:55 PM

Contact

28,218 point All-Star
johram
Member since 06-13-2006, 10:36 AM
Sweden
Posts 3,543

CSS image paths are always relative to the location of the CSS, not the page that includes it. So in this case, prefixing with .. (parent folder) should probably do the trick.

If this post was useful to you, please mark it as answer. Thank you!

Re: CSS background image trouble! please help...m a newbie!

05-11-2008, 4:02 AM

Contact

Answer

1 point Member
mandeep123
Member since 11-12-2007, 10:12 PM
Bangalore
Posts 21

Hi,

First of all, thank u guys for the replies....but i tried like dat too. didn't work for me.....then i found a solution for this...

my .css file was inside a CSS folder then something struck me and i pulled out my .css file and put it in the root directory of my site. guess what.... it worked. But i really hv no idea why it doesn't work when my .css file is under a folder even though i mention the path in the default.aspx file where the path comes instantly when i drag my .css file and drop it in the default page. thanks neway guys for ur interest. I hope someone tells me the logic behind this thing wat happened wit me!

Re: CSS background image trouble! please help...m a newbie!

05-11-2008, 10:13 AM

Contact

28,218 point All-Star
johram
Member since 06-13-2006, 10:36 AM
Sweden
Posts 3,543

You shouldn't have to move the CSS file to get things working. Assume you have the following directory structure:

|
+--Css (folder)
|  \--Stylesheet.css
|
+--Images (folder)
|  \--image.jpg
|
\--Default.aspx

In your Default.aspx, you would do a link rel="stylesheet" referring to the css file with a relative path of "Css/Stylesheet.css" just like you did.

Now, in your Stylesheet.css, in order to refer to an image, you need to go up one level (..) - since you're in Css folder, and then down in the Images folder. The path for this is "../Images/image.jpg".

If you have a directory structure similar to the one I've shown, things should work for you. Make sure you use forward slash (/) and not backslash (\) in paths.

If this post was useful to you, please mark it as answer. Thank you!

Re: CSS background image trouble! please help...m a newbie!

05-13-2008, 5:31 PM

Contact

1 point Member
mandeep123
Member since 11-12-2007, 10:12 PM
Bangalore
Posts 21

Thanks Johram.....i guess you are right but am yet to try what you said. But i'll try this too when am done with my project thing...now i jus don want to mess it up..jus scared. thanks a lot to give the knowledge.

Page 1 of 1 (6 items)

RSS Available