469,904 Members | 2,288 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,904 developers. It's quick & easy.

Strange background behaviour in Firefox

Hi,

Can anybody help to fix the vertical centering of an image in Firefox (2.0)?
Apparently, Firefox puts the top half of the image in the background of the
top of the screen instead of placing it just in the middle of the screen.
Works wel in IE though.

The code itself is very simple as you can see here:
http://map.minifig.be/slide/back.html

Any help is appreciated.

Roger
Dec 10 '06 #1
2 2861
Roger wrote:
Hi,

Can anybody help to fix the vertical centering of an image in Firefox (2.0)?
Apparently, Firefox puts the top half of the image in the background of the
top of the screen instead of placing it just in the middle of the screen.
Works wel in IE though.

The code itself is very simple as you can see here:
http://map.minifig.be/slide/back.html
The background image centers only on the "content" of body. That means
if the viewport is filled with content, then the background-image will
be centered on the full viewport. If the viewport's content only covers
1/2, then the image will be centered over that 1/2, or actually over the
top 1/4 of the viewport. The example has "no" content, therefore the
background-image is centered over the top edge of the viewport.

Adding: html, body {height:100%;} will center the image over the full
viewport irregardless of the content.

--
Gus
Dec 12 '06 #2
Gus Richter wrote:
Roger wrote:
>Hi,

Can anybody help to fix the vertical centering of an image in Firefox
(2.0)? Apparently, Firefox puts the top half of the image in the
background of the top of the screen instead of placing it just in the
middle of the screen. Works wel in IE though.

The code itself is very simple as you can see here:
http://map.minifig.be/slide/back.html

The background image centers only on the "content" of body. That means
if the viewport is filled with content, then the background-image will
be centered on the full viewport. If the viewport's content only covers
1/2, then the image will be centered over that 1/2, or actually over the
top 1/4 of the viewport. The example has "no" content, therefore the
background-image is centered over the top edge of the viewport.

Adding: html, body {height:100%;} will center the image over the full
viewport irregardless of the content.
Oh, and this is proper behavior per the specifications for all
conforming browsers and not only Fx 2.0

--
Gus
Dec 12 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Harlan Messinger | last post: by
10 posts views Thread by Roderik | last post: by
13 posts views Thread by Giggle Girl | last post: by
reply views Thread by theintrepidfox | last post: by
2 posts views Thread by niels.froehling | last post: by
7 posts views Thread by lewisthesmith | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.