408609 - body background-image centered horizontally displayed at the wrong position

Status: RESOLVED INVALID

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Matt Sephton]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/523.12 (KHTML, like Gecko) Version/3.0.4 Safari/523.12
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9b3pre) Gecko/2007121604 Minefield/3.0b3pre

body background-image centered horizontally displayed at the wrong position, when browser window is narrower than page content (horizontal scroll bar visible)

Reproducible: Always

Steps to Reproduce:
1. assign background image to body using CSS.
2a. resize window whilst it is wider than fixed width content.
2b. observe background remaining centered.
3a. resize window whilst it is narrower than fixed width content.
3b. observe background centered wrongly.

Actual Results:  
background is not centered correctly relative to document content when window is narrow than content (horizontal scroll bar)

Expected Results:  
background should be centered on document content.

Also verified in current 
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-GB; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Another example and description of the problem:
http://www.vileworks.com/blog/48-Firefox%20and%20Opera%20background-image%20bug?.html

Comment 1

[Matt Sephton]

Still present in Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9b3) Gecko/2008020511 Firefox/3.0b3

Comment 2

[Marc González Majoral]

Can confirm this is still happening in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4.

While you manually resize the window, bug keeps appearing/disappearing. It's actually happening to me only when vertical scrollbar is not present.

Comment 3

[Daniel.S]

Thanks for reporting. However, this is no bug.

When following the article you mentioned, you'll find a Workaround and the reason why this is no bug.

In HTML, background properties set on the body element are not used on the body element but on the html element (if the html element has no own background properties set).

The root elements background properties are set on the viewport so if the viewport shrinks (e. g. by horizontally resizing the window), the image is centered with respect to the viewport width.