Background image, within a div, in FF

day

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=400px;
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.

Jul 21 '05 #1

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

Looks great in IE.
IE is wrong.
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

As it should, quote from
http://www.w3.org/TR/CSS21/colors.ht...round-position
"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

Jul 21 '05 #2

RobG

day wrote:

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=400px;

--------------------^

Typo I hope.

[...]
--
Rob

Jul 21 '05 #3