jonter - 10:56 am on Sep 9, 2012 (gmt 0)

Out of curiosity... what happens if you don't change the background-position directive? I wouldn't be surprised to find webkit isn't really getting it wrong: all the other browsers are. See, you've told it to flip the directionality of all right/left elements. So if you say that something is to be positioned right, and then add a <dir = "rtl"> layer, then it stands to reason that your right-aligned element should instead be left-aligned.

This is incorrect. Setting dir="rtl" only tells browsers that text will be read right-to-left instead of left-to-right. Inline elements will aligned right instead of left as we are used to. Right is still right and left is still left in CSS.

body[dir=ltr] {one version of your background here} body[dir=rtl] {other version of your background here}

The problem is, what CSS should I use in the body[dir=rtl] version that would make the background image align to the right in a webkit browser when horizontal scrollbars are visible?

Aligning the body background image to the right probably only makes sense in a RTL page, but I've found out that if you try these URLs in different browsers, the dir="rtl" is not the problem here. Webkit will align the background image to the right of the viewport instead of the document, even though the document's body has a width value larger than the width of the viewport.

[edited by: alt131 at 11:25 am (utc) on Sep 9, 2012]
[edit reason] Thread Tidy [/edit]