Strange background behaviour in Firefox

[Roger]

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

[Gus Richter]

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

[Gus Richter]

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