My background image is showing up in the wrong location in Firefox- works fine in IE

Discussion in 'CSS' started by stephanieg, May 29, 2008.

0
  1. #1
    Hi everyone- I'm a newbie with CSS and am having a problem with a simple page I just posted: www.twinpadres.com. The page is rendering fine in IE, but in Firefox, the bg image is showing up all the way at the top of the page- cut off. Any ideas?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title>TwinPadres</title>
    </head>
    <style type = "text/css">

    body { background-image: url(comingsoon.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000

    }
    </style>
    <body>
    </body>
    </html>
     
    stephanieg, May 29, 2008 IP
  2. stephanieg

    stephanieg Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    When i switched around the order of the list, then added background-position: fixed to the list at the bottom- it worked. It looks like Firefox is ignoring the last item in the list, whatever it is...
     
    stephanieg, May 29, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    It's more likely due to the element being empty, therefore of zero height. Fixing the background-attachment locks it onto the viewport.

    cheers,

    gary
     
    kk5st, May 29, 2008 IP