Css Layout: How Can I Make The Header Image Occupy All The Width Of A Page?

[tinfanide]

body {margin: 0;padding: 0;background: #FF9FFF;} div#header {background: center no-repeat url(xxx.png);height: 300px;width: 100%;} div#wrapper {width: 1280px;margin: 0 auto;background: #FFF;} /*div#footer {margin: 0 auto;width: inherit;height: 250px;position: relative;clear: both;}*/ div#menu {margin: 0;width: inherit;height: 40px;background-color: #FF99CC;}div#menu ul {margin: 0;padding: 0;line-height: 40px;} div#menu li {margin: 0;padding: 0;list-style: none;float: right;position: relative;}div#menu ul li a {text-align: center;height: 40px;width: 200px;display: block; color: #FFFFFF;text-decoration: none;text-shadow: 1px 1px 1px #000;}div#menu li:hover {background: #FFFF66;}div#menu ul li a:hover {color: #FF0099}#flashContent { width:100%; height:100%; }

<div id="header"></div><div id="wrapper"><div id="content"><div id="menu"><ul>  <li><a href=""></a></li>	 <li><a href=""></a></li>  <li><a href=""></a></li>  <li><a href=""></a></li></ul></div>   </div><!--<div id="footer"><img src="" /></div>--></div>

How can I make my header image of 1280px*200px extend to the full width of a page in different resolutions without repeating?Like this site: http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/ But my header image is a gradient one and I cannot set the header background-color as a gradient one so I get stuck at this.Is there a CSS fix for this problem?

[eTianbun]

You can't do that in CSS2 but CSS3 have a property you can use to specify the width and height of an element's background-image.

background-size:100% 200px

EDIT: Note that the property, is not yet standard (some older browsers may not support it)!

[dsonesuk]

The none css3 alternative is to use a position: absolute; with width: 100%; and height: 200px; img element, within a container element with position:relative;

[tinfanide]

I've tried the alternative, but it does not work:

div#header {        height: 300px;    width: 100%;    position: absolute;}div#header img {    position: relative;}

<div id="header"><img src="" /></div><div id="wrapper"><div id="content"><div id="menu"><ul>  <li><a href=""></a></li>		 <li><a href=""></a></li>  <li><a href=""></a></li>  <li><a href=""></a></li></ul></div> </div><!--<div id="footer"><img src="" /></div>--></div>

[ShadowMage]

You've got your positioning backwards. The img should be absolute and its container (ie, div#header) should be relative. OTOH, if your image is just a gradient, why not use CSS gradients? Is it really that important the old browsers have the gradient? You could save a lot of bandwidth by eliminating that enormous image.There's an excellent gradient generator here that produces code supporting a wide variety of browsers, supposedly even IE6.