While adapting a site for right-to-left readers (such as Arabic and Hebrew languages) I'm experiencing unexpected behavior in any Webkit browser when it comes to assigning a background-image to the body tag that is right aligned.
First of all, let me include an example page where this behavior can be seen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar">
<head>
<title>Body background image right aligned</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body {
margin: 0;
background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png);
background-position: top right;
background-repeat: repeat-y;
}
#header {
height: 100px;
background-color: blue;
}
#main {
position: absolute;
top: 100px;
right: 150px;
width: 610px;
background-color: red;
}
#column {
position: absolute;
top: 100px;
right: 0;
width: 150px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="main">Main</div>
<div id="column">Column</div>
</body>
</html>
Now, make the windows smaller until a horizontal scrollbar appears. The background image will no longer be aligned to the right of the document, it will be positioned x pixels from the left where x is the width of the viewport.
The following browsers show this unexpected behavior:
While IE, FireFox and Opera show the expected result where the background-image, independent of the size of the viewport, always is aligned to the right.
I'm a great Webkit fan but I havn't find any explanation to this other than.... it's a bug :( It would be great if anyone finds another explanation to this behavior. Basically:
I should say that I'm not looking for a workaround, just a possible explanation. I've got a workaround already where I place an image absolute right:0 and z-index:-1.
Thanks!
To correct this behavior and maintain the background position as top right, change your body CSS to this:
body {
margin: 0;
background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png);
background-position: top right;
background-repeat: repeat-y;
background-attachment: fixed;
}
I believe the webkit browsers are placing the background according to the width of the viewport as you mentioned, but are also redefining "top right" when the browser is resized. After resizing, if you use the bottom scroll bar to scroll all the way to the left, you can see the background fits again, however your elements are in the wrong location. setting background-attachment to fixed will fix your problem.