Background image, within a div, in FF

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • day

    Background image, within a div, in FF

    I'm trying to use a non-scrolling background image within a div (the
    non-scrolling part is a "nice-to-have" vs a "have to have"). The
    style for that is:

    <div style="height=4 00px;
    background-image:url(bgrd-foo.jpg);
    background-position: center top;
    background-repeat:no-repeat;
    background-attachment: fixed;">

    Looks great in IE. But in FF, the background-position: center top
    part causes the image to be positioned at the top of the PAGE rather
    than the top of the DIV, and worse, the image only displays starting
    where the div occurs on the page. By that, I mean the top portion of
    the image doesn't show up - only the portion of the image that is to
    be within the div shows up.

    How can I cause the image to be positioned at the top of the div in at
    least IE and FF?

    How can I cause the div to be sized high enough to hold the whole
    image in both browsers? In FF, the image truncates at the bottom of
    the div.

  • Spartanicus

    #2
    Re: Background image, within a div, in FF

    day <Day@theraces.i nvaliddomain> wrote:
    [color=blue]
    >Looks great in IE.[/color]

    IE is wrong.
    [color=blue]
    >But in FF, the background-position: center top
    >part causes the image to be positioned at the top of the PAGE rather
    >than the top of the DIV[/color]

    As it should, quote from

    "If the background image is fixed within the viewport (see the
    'background-attachment' property), the image is placed relative to the
    viewport instead of the element's padding area."

    --
    Spartanicus

    Comment

    • RobG

      #3
      Re: Background image, within a div, in FF

      day wrote:[color=blue]
      > I'm trying to use a non-scrolling background image within a div (the
      > non-scrolling part is a "nice-to-have" vs a "have to have"). The
      > style for that is:
      >
      > <div style="height=4 00px;[/color]
      --------------------^

      Typo I hope.

      [...]


      --
      Rob

      Comment

      Working...