CSS & background-image in IE, Firefox, Netscape and Opera Hide options?

Hi, I designed a page using CSS & layers (No tables) which appears OK in IE & Netscape, but not in FireFox or Opera. To see what is the problem please visit http://www.zadpro.com/index.php If you open the page with IE or Netscape you will see a Gray gradient in the top & a Blue gradient in the footer of the page. But if you open it using FireFox or Opera you can only see the top gray gradient & not the bottom blue one. I used the following style for the blue gradient: html, body { background-attachment: scroll; background-color: #FFFFFF; background-image: url(blue.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px;} If I add height: 100%; to the above style, the blue gradient will appear but if I re-size the window height that gradient will move up & creates a blank space below it. Here is how it looks when I add this code: http://www.zadpro.com/test.php Thank you.

Public Comments

  1. Looks fine in my browser "Firefox 2.0" Ah I had to scroll down to see it. Why don't you use a div tag and put the background image in that and place it a the bottom of the page using fixed positioning.
  2. I tried toying with the css but I could not figure out a fix. I would recommend you ask in the Opera forums (http://my.opera.com/community/forums/forum.dml?id=27). The Opera community is very helpful and friendly. I would copy and paste pretty much your whole question there. Sorry I could not help. The fix for Opera will probably fix Firefox since they are both adhere to standards pretty well.
Powered by Yahoo! Answers