How can you make a background gradient using CSS so that the gradient appears the same when viewed in different screen sizes?

It's probably relatively simple code, but could you give us an example of what you'd like to do?

- Steve

I'm still in the planning stages of my layout but here's a brief idea of my layout:

http://www.liesldexheimerdesign.com/layout2.html

I know I could do repeat instead of repeat-x but then the gradient would display incorrectly and it will display differently for different screen sizes.

You're not going to be able to stretch the gradient, but you can take the darkest color at the bottom (which appears to be #707070) and then use the CSS like this:

background: #707070 url(http://www.liesldexheimerdesign.com/bg.jpg);

So that when the gradient ends, the darkest color continues to display.

- Steve

Ahhhh very clever. Thanks!

Originally Posted by stevej

You're not going to be able to stretch the gradient

Actually, I found a way. Make an apdiv that serves as a background (in other words the z-index is lower than all other elements and the width and height is 100%). Then put an image inside of this div and set that image's width and height to 100%.

What's really awesome is that you can have multiple backgrounds if you want - one tiling in repetition, and another as a gradient overlay that will scale when you resize.

There, I've just shared with you the best trick in my toolbox.

View example here.

Actually, I found a way. Make an apdiv that serves as a background (in other words the z-index is lower than all other elements and the width and height is 100%). Then put an image inside of this div and set that image's width and height to 100%.

Except using an AP div for that is not a good idea. You really don't want to use absolute positioning all over the place, and in this case it's just not necessary. Worse, IE has some major issues with AP and z-index. You can "layer" divs with different backgrounds fairly easily w/o using absolute positioning, I do it all the time.