I am making a website where I want a gradient (going from black to transparent) that starts at the bottom of the page. I have managed this and it works in FF3 and Safari, when taking a peek on Litmuss I saw that it was... not so good on IE7 and FF2 ( http://planc.litmusapp.com/pub/9162ed1 for a preview).

Is there someone that would be able to give me a hand as to how to fix this slightly annoying problem? Actually, it would be ideal if I could put the gradient in my body so that it can not overlap with the links if the window would be too small.

With regards, and thanks in advance


3 answers

This was chosen as the best answer

I think if you change your CSS this would work fine.

First, get rid of the #backdrop div and the CSS associated with it.

Then change your body CSS to look like this:

body {
  font-family: Arial;
  font-size: 15px;
  background-color: #A12A00; 
  background-image: url(/img/backdrop.png); 
  background-repeat: repeat-x; 
  background-attachment: fixed;
  background-position: center bottom;

Since it is in the body tag, it will fill the whole screen. I didn't check it on FF2, but I think it will work. Also, if you want the height of the div to be 270px, change the backdrop.png image to be 270px;

Answered over 9 years ago by Abinadi Ayerdis

Abinadi is exactly right, though it might be worth consolidating all that into a shorthand like:

body {
background: #a12a00 url('/img/backdrop.png') repeat-x fixed center bottom;

You don't need a separate DIV for the backdrop.

Answered over 9 years ago by Andy Zhang
  • Good point, Andy. I tend to like having them on separate lines because it is a bit more clear, but the shorthand sure saves on space. +1 Abinadi Ayerdis over 9 years ago
Kevin 0

Thanks chaps, works like a charm :-)

Answered over 9 years ago by Kevin