...

View Full Version : css background image



phill_ridout
07-15-2007, 09:16 PM
i feel so stupid, im stuck with the most basic of things!
i have a image called bg.gif in a folder called images in the root folder. also in the root folder there is a page called index.htm and a folder called scripts with a style sheet in called main.css. no matter what i try i cannot get the background image to appear. Am i missing something blatenly obvious?

index.htm

<html>
<head>
<link href="scripts\main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="pagehdr">

<img src="images/header1.jpg" />

<div id="topmenu">
<ul id="navtop">
<li><a href="home.htm">Home</a></li><li><a href="products.htm">Products</a></li><li><a href="gallery.htm">Gallery</a></li><li><a href="links.htm">Links</a></li><li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

</div>
<div id="pagemain">
Main Page
</div>
<div id="pageftr">
footer
</div>
</div>
</body>
</html>

main.css


body {
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-image: url('/images/bg.gif')
}

#container {
width: 780px;
margin: 0 auto;
text-align: left;
background-color: #ffff99;
}

#pagehdr {
}

#pageftr {
text-align: center;
font-size: 12px;
font-weight: normal;
}

#pagehdr img {
border: 0px none;
width: 780px;
}

#navtop {
text-align: center;
padding: 0.5em 0em 0.5em 0em;
margin: 0px;
}

#navtop ul {
}

#navtop li {
display: inline;
list-style-type: none;
padding: 0px;
margin: 0px;
}

#navtop li a {
background-color: #ffff99;
padding: 0.5em 2em 0.5em 2em;
margin: 0px;
font-family: sans-serif;
font-weight: 800;
font-size: 16px;
text-decoration: none;
color: #000000;

}

#navtop li a:hover {
background-color: #000000;
color: #ffff99
}

a {
background-color: #ffff99;
font-family: sans-serif;
font-weight: 800;
text-decoration: none;
color: #000000;
}

a:hover {
text-decoration: underline;
}

div {
border: 0px none;
padding: 0px;
margin: 0px;
}

Thanks for any help.

sdcomputerz
07-16-2007, 02:41 AM
You forgot the semi-colon(;) behind the background.

_Aerospace_Eng_
07-16-2007, 03:13 AM
You forgot the semi-colon(;) behind the background.
Its not necessary if its the last item in the CSS declaration. I think the issue here is this line

<link href="scripts\main.css" rel="stylesheet" type="text/css" />
Notice anything wrong?

jlhaslip
07-16-2007, 04:15 AM
/not yet\

phill_ridout
07-17-2007, 08:23 PM
thanks for your help guys, but its actually a problem with the path, it should be:


background-image: url('../images/bg.gif')

because the style sheat is located in a separate folder, all paths are from there (if you see what i mean)

cheers all the same

phill_ridout
07-17-2007, 08:28 PM
Notice anything wrong?

I do not :-s



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum