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

Strange background behaviour in Firefox

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


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

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