Hi! I have a fixed centered layout of 960px. Within my container div I have a div of 960 x 300px for which I use a background image. The background is made up from a gradient going from left (dark) to right (lighter). What I try to figure is what the best way would be to continue those two colors outside the container so that on the left the dark color continues on the right side the lighter color. Does anyone has any suggestion how to do such a thing.
Thank you ina advance
I don’t know if this is the best way because it involves a background image in the body that sits behind the container. I would repeat-y a thin horizontal strip that was the one colour on the left and the other colour on the right.
Thank you for the reply WebMachine. What I finally have done is the following: I took a 1px vertical strip from each side and created two absolute positioned divs:
.left_background,
.right_background {
width: 50%;
height: 300px;
position: absolute;
left: -25%;
top: 132px;
z-index: -100;
background: url(../images/site/left_background.png) 0 0 repeat-x;
}
.right_background {
left: 50%;
background: url(../images/site/right_background.png) 0 0 repeat-x;
}
I saw it on two computers with different dimensions and screen resolutions, and it is giving the desired result. If anyone see that this will give me some kind of trouble please let me know.
Well, you are using percents to specifcy where the image starts, and depending on the resolution, that can mess with how it appears.
It should be fine for the most part but seeing as I don’t know what the images look like it may or may not cause issues with how seamless the image plays into the design.
As I understand it, your two background images are just solid colours that match the edges of the gradient in the container, so why don’t you simplify it a bit by setting one colour as the body background colour and just use one of your images, say the left background div.
If you want the background to keep track with the text automatically (unlike the absolute method) then you could do this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0;padding:0}
.content p {
margin:0 0 1em 0;
padding:5px
}
.wrap {
color:#fff;
clear:both;
width:100%;
min-width:1000px;
float:left;
background: #fc6;
color:#000
}
.inner {
float:left;
width:50%;
position:relative;
background:red;
margin-right:-1px;
}
.content {
width:1000px;
margin-right:-500px;
position:relative;
float:right;
padding:1em 0;
background:orange;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="content">
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
</div>
</div>
</div>
</body>
</html>
mein gott people – talk about taking something simple and making it complex…
make a background image that’s like… 2048x1, repeat-y it on an outer container aligned center, end of problem.
<div class="headerWrapper"><div class="header">
Whatever you have inside the header here
<!-- .header, .headerWrapper --></div></div>
.headerWrapper {
background:#CCC url(images/headerBackground.png) top center repeat-y;
}
.header {
width:960px;
height:300px;
margin:0 auto;
}
The background color would be what you want to show images off, and again headerBackground.png being some absurd width like 2048 or 3072 and 1px tall, and headerWrapper would be the first thing after your <body> tag.
DONE!!! SIMPLE! (basically what webmachine was suggesting).
Tossed together a live demo of that in action…
http://www.cutcodedown.com/for_others/donboe/template.html
I made the image 3072x1 with the center 960px being red to blue – the left side fades that red towards orange, the right side fades towards green. You could just as easily make those a fade towards the same color like black (often desirable in some designs) or make them a solid color.
As with all my examples the directory
http://www.cutcodedown.com/for_others/donboe
is open for easy access to the bits and pieces.
– edit – made one small change to the image – set it to fade to the same purple on both sides as the images off background color, that way should it be shown on something wider than 3072px, it won’t look broken.
My example was one extra div and no large repeated image needed so I think that’s a fair trade off - and more fun :).
Only useful for solid color though… does handle very large widths nicely…
But when the ‘large’ image is 520 bytes… That massive CSS of yours really offsets the difference.
Oh, tossed up an example of doing what Paul was doing, just a wee bit simpler by NOT wrapping it since OP did say ‘300px height’ – fixed height means don’t wrap it – becomes way simpler and can support dynamic width.
<div id="headerBackground"><div></div></div>
<div id="header">
Whatever you'd have inside the header here.
</div>
#headerBackground {
position:relative; /* make sure legacy IE gets 50% correct */
margin-bottom:-300px;
background:#00F;
}
#headerBackground div {
height:300px;
width:50%;
background:#F00;
}
#header {
position:relative; /* depth sort over #headerBackground */
width:960px;
height:300px;
margin:0 auto;
background:#808 url(images/headerBackground2.png) top center repeat-y
}
http://www.cutcodedown.com/for_others/donboe/template2.html
No floats, no clearing, no extra id or class, no unnecessary width declarations… I’m going to play with a THIRD technique as well just to show another approach.
Third and final method - CSS3 with IE filters. Problem is, even IE9 doesn’t support color-stops, so what we’re trying to accomplish will NEVER work in IE9 and lower (works in 10 beta).
<div id="headerWrapper"><div id="header">
Whatever you'd have inside the header here.
<!-- #header, #headerWrapper --></div></div>
#headerWrapper {
/* pre-css 3 gets solid bg */
background:#808;
/* 'current' 2012 browsers */
background:-moz-linear-gradient(left,#FF0000 0, #FF0000 50%, #0000FF 50%);
background:-o-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
background:-ms-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* early webkit declares it different */
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#FF0000),color-stop(50%,#FF0000),color-stop(50%,#0000FF));
/* while newer webkit does not */
background:-webkit-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* THE ACTUAL CSS3 property! */
background:linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* IE filters can't do color stops, so don't even BOTHER */
}
#header {
position:relative; /* depth sort over #headerBackground */
width:960px;
height:300px;
margin:0 auto;
/* pre-css 3 gets solid bg*/
background:#808;
/* 'current' 2012 browsers */
background:-moz-linear-gradient(left,#FF0000 0, #0000FF 100%);
background:-o-linear-gradient(left,#FF0000 0,#0000FF 100%);
background:-ms-linear-gradient(left,#FF0000 0,#0000FF 100%);
/* early webkit declares it different */
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#FF0000), color-stop(100%,#0000FF));
/* while newer webkit does not */
background:-webkit-linear-gradient(left,#FF0000 0,#0000FF 100%);
/* THE ACTUAL CSS3 property! */
background:linear-gradient(left,#FF0000 0,#0000FF 100%);
/* filter can do this for legacy IE */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#0000FF',GradientType=1 );
}
Yeah, those vendor prefixes make implementing this so clear and easy… Got it live here:
http://www.cutcodedown.com/for_others/donboe/template3.html
Though at least no images were harmed in the coding of this demo. The real laugh is thanks to all those vendor prefixes, even without the comments all those background declarations are two to three times LARGER than the image file.
As usual it will be so buggy and slow in FF the moment you have enough content to scroll, you’d think it was a myspace page 
Just to show how absurd using code for this really is…
http://www.cutcodedown.com/for_others/donboe/images/headerBackground4.png
4096x1, continues the solid color each side of the center 960 px… file size? 317 BYTES lossless 24 bit no alpha .png…
Forget the fancy CSS bull – Use an image on an outer wrapper.
Good examples Jason 
Yes, Firefox is slow with those gradients in the same way that fixed position used to causes it to slow right down when scrolled.
I’ll throw one more into the mix but only for IE8+.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
.wrap {
width:100%;
min-width:960px;
overflow:hidden;
}
.content p {
margin:0 0 1em 0;
padding:5px
}
.content {
width:960px;
position:relative;
margin:auto;
padding:1em 0;
background:orange;
color:#fff;
}
.content:before, .content:after {
content:" ";
display:block;
position:absolute;
top:0;
bottom:0;
left:-999em;
width:999em;
background:red;
}
.content:after {
left:auto;
right:-999em;
background:green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
<p>This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text : This is some text :</p>
</div>
</div>
</body>
</html>
Only needs the two divs now but would need an expression for IE6/7 to match the before and after pseudo classes.
I do agree that the background image approach is the simplest and easiest to implement if you don’t mind the extra image.
On a side note, here’s a handy tool for generating the CSS/ IE Filter gradients that DS60 demonstrated: http://www.colorzilla.com/gradient-editor/