PDA

View Full Version : css width:100% background images



alexgallz
03 Feb 2010, 12:43 PM
hi guys
so here's my problem... im making this website right and this time it has to be 100% perfect. and so here is my problem:
ive got a different background images on both body and header. the header is my main problem. it consists of 2 divisions: one is set to fill in the screen(width:100%) and to define the background image. the other one is a static division which will simply contain the actual header(banner menu etc.) which is with a fixed width value(width:990px)

everything seems perfect untill i resize the window. then the following happens:
http://img46.imageshack.us/img46/4982/fkdissh1t.th.jpg (http://img46.imageshack.us/img46/4982/fkdissh1t.jpg)
the background image that i assigned to the header does not fill the window. how do i fix this thing? oh and here is the code:
html:

<!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" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">

<div id="header">
<div id="header-inner">
<div id="upper-header">
<div id="clock">
<span><img src="images/clock.gif" alt="clock" /><?php echo date("D M j G:i:s T Y"); ?></span>
</div>
</div>
<!--<img src="images/lcs.png" alt="ls" />-->
</div>
</div>

<div id="center">
<div id="body">
</div>
</div>

<div id="footer">
</div>
</div>
</body>
</html>

css:

/*---------------------------------------MAIN RULES---------------------*/
body {
margin:0;
padding:0;
background:url(images/background.jpg);
}

#content {
width:100%;
height:1000px;
}

#center {
width:990px;
margin:auto;
}
/*--------------------------HEADER-------------------------------------------*/
#header {
width:100%;
height:303px;
background:url(images/headerbg.jpg);
background-repeat:repeat-x;
}

#header-inner {
width:990px;
margin:auto;
}

#upper-header {
width:100%;
height:52px;
}

#clock {
width:270px;
margin-left:5px;
margin-top:2px;
float:left;
}

thanks guys

Wickham
04 Feb 2010, 02:29 AM
The background image on the #header cannot resize to fit any width exactly. You have to use a normal image with width: 100% and probably a z-index: -1; so that it sits below the other image.

Here's an example of the image which fits any window resolution and you could put another image on top. You probably need to center the image on top if you want it to relate to the #header image. The main image doesn't need to center as it always fits width: 100%;

http://www.wickham43.net/backgroundfullwidthflexible.html