316647 - background-position not centering image

Status: RESOLVED DUPLICATE of bug 243751

(Firefox :: General, defect)

Description

[Des Kerrigan]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051107 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051107 Firefox/1.5

When defining "background-position center center" in the body tag does not center the image. The image position left 50% and top 50% is not positioned in the middle of the screen, instead the middle of the image is positioned at the top of the screen. Setting the background image in a div works OK so it seems to be only the body tag.

Reproducible: Always

Steps to Reproduce:
1. Visit  www.nyklogistics.com.au/test.htm
2.
3.

Actual Results:  
saw that the image is not positioned centered on the screen. The middle of the image appears at the top of the screen.

Expected Results:  
What is shown viewing in Internet Explorer 6. The image is correctly centered

CSS 2.1 specification see http://www.w3.org/TR/CSS21/colors.html#background-properties

Look at the example in 14.2.1 Background properties

I have tried  using  "background-position: center", 
  "background-position: center center" and "background-position: 50% 50%" with the same result.

Comment 1

[Ryan Flint [:rflint] (ping via IRC for reviews)]

It's rendered properly as per the spec you linked. The image is placed relative to the height of the root element, which www.nyklogistics.com.au/test.htm does not have defined.

*** This bug has been marked as a duplicate of 243751 ***

Comment 2

[Des Kerrigan]

I would have thought that the root element (HTML element) would default to 100%.
Anyway the following works

<style type="text/css">
html  {
	height: 100%;
	width: 100%;
}
body   {
    height: 100%;
    width: 100%;
	background-image: url(images/bgimage16.gif);
	background-repeat: no-repeat;
	background-position: center center;
    margin: 0;
}
</style>

Thanks

Des