PDA

View Full Version : CSS Background Cuts Off - IE



Cestchelle
27 Nov 2007, 04:23 PM
I am using a CSS and repeating background image to achieve a gradient background.

The background looks great in all browsers except, of course, IE (I'm using 5.2 for Mac), where the background abruptly ends near the end of the page:

http://www.unitedservicesofamerica.com/windows.htm

Any advice would be much appreciated! Thanks!

-Michelle

Wickham
28 Nov 2007, 01:48 AM
On my two computers with resolutions 800*600 and 1024*768 I couldn't see the problem.

I checked your repeating image usablue3gradient1000.jpg and noticed that it is 1px wide x 1000px high. I then noticed that your stylesheet has
body {
background-color: #FFFFFF;
background-image: url(images/usablue3gradient1000.jpg);
background-repeat: repeat-x;
}
repeat-x will only repeat horizontally so it is not repeating vertically so I assume you have a screen resolution over 1000px high.

To repeat in both directions delete background-repeat: repeat-x or edit to background-repeat: repeat; but this would start the darker color again so you need to stretch the gradient to say 1600px to suit most screen resolutions. Use

http://tools.dynamicdrive.com/gradient/

Don't forget that browsers have a default body margin of 20px so if you are seeing this round the top, sides and bottom add margin: 0; to the body style.