Vertical gradient body background glitch - ideas?



Hey everyone. I encounted one hell of an odd issue today.

I caught this issue by chance and wonder if anyone knows how to correct it.

I am using a background image on the body tag - the image is a gradient that has a set width, and then repeats y down the page as needed.

However if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width the image actually IS (in this case 1225px), it adjusts to the size of the window, mucking up my layout.

Here’s some screenshots: (how it SHOULD look) (how it looks when the window is shrunk)

The only way I can think to fix this issue is to move the image into the div box setting the size of the site (since it sets a width value), however, the background will only appear there if I set a height value (I also don’t like the look as it adds space at the top), but I use the layout on many different sized pages, and want to be able to add text without having to resize the background every time.

I have tried using a height of 100% - no background image when used in the wrapper.

Does anyone know how to make the browsers leave the image at it’s correct size, or how to put a background image into a DIV that repeats as long as there is content, withOUT a height value (if I HAVE to do that)?

This is only an issue because the background image is a gradient. Any other image - no problem. Bizarre!


Not sure why the image is being resized. But I tried your screenshots and it said they were 404.

Post up a working screenshot or live link and I can take a look at it. :wink:


I ended up MOSTLY correcting the issue so I removed them.

I was able to fix the issue I was talking about with this code:

background: #000000;

body {
background:url( repeat-y center;
min-width: 1225px;

Unfortunately I encountered a new issue with scrolling pages - they cut off at the 100%. But if I delete the command - the image is gone. Any ideas besides making the % higher as needed?