Master Pages, Themes and Navigation Controls

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

catchgani3508 — Wed, 25 Nov 2009 14:05:20 GMT

Hi johram

I have folder structure like

|
+--App_Themes (folder)
|  +--Theme1 (folder)

|       +--Style1.css


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

So, can you please help me in giving path for the 'background-image' attribute in my stylesheet. I already tried

url(../../Images/image.jpg), but its not working.

Thanks and regards

Ganesh NR

9849255958

devganesh@aol.in

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

mandeep123 — Tue, 13 May 2008 21:31:01 GMT

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.

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

johram — Sun, 11 May 2008 14:13:25 GMT

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.

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

mandeep123 — Sun, 11 May 2008 08:02:09 GMT

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!

johram — Sat, 10 May 2008 23:55:17 GMT

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.

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

avidyarthi — Sat, 10 May 2008 23:03:57 GMT

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.

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

mandeep123 — Sat, 10 May 2008 20:03:47 GMT

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>