By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,213 Members | 2,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,213 IT Pros & Developers. It's quick & easy.

Background image, within a div, in FF

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.