Question

I have two different gradients that need to repeat on the x axis. One gradient appears to the left of my page layout all the way to far left browser window and the other needs to repeat from the right of my page layout to the far right browser window. The entire width of the page has an image that blends into both and appears above the repeating backgrounds.

Ideally, I could use two DIVs and set them to 50% width, then place the 960 width part over top of both in the center of the window, but I don’t see any way to do this.

How can I accomplish this using CSS? I need to support IE7+.

Answer 1

This should work. I would only make the green the repeatable image and use the background color to make the red (represented by “red” below).

CSS

body {
    position: relative;
}

#left {
    background: red url(/yourleftimagefile) bottom left repeat-x;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
}

#right {
    background: red url(/yourrightimagefile) top left repeat-x;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
}

#center {
    position: relative;
    z-index: 1;
    width: 960px;
    margin: 0 auto;
}

HTML

<div id="#center"></div>
<div id="#left"></div>
<div id="#right"></div>

The html assumes a flexible height #center but it could be made a fixed height.