1

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:

  • Chrome (Win7 & WinXP)
  • Safari (Win7 & WinXP)
  • Webkit MiniBrowser, nightly build 2012-09-06 (Win7)

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:

  1. Does this happen to you as well?
  2. Is this due to my markup being incorrect?
  3. Are there errors in the CSS?
  4. Or... is it a Webkit bug :(

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!

jonr
  • 136
  • 2
  • 10

1 Answers1

0
  1. Yes I can repeat this effect by visiting your included link, using Chrome 21.0.1180.89 m on Windows 7 x64
  2. Your markup concerning background placement is not incorrect
  3. Your CSS concerning background placement is not incorrect
  4. I think this can be loosely defined as a "webkit bug"

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.

chris.antonellis
  • 86
  • 1
  • 5
  • Umm, doesn't fix the issue for me. Running `Chrome 19.0.1084.1 m`. – Chris Sep 17 '12 at 18:12
  • Actually, it does fix the issue, but only if I size up the window then resize it. – Chris Sep 17 '12 at 18:13
  • can you better explain "size up then resize it" ? I have tried multiple approaches with the background-attachment set to fixed and they all seem to be working per your original requirements (background stays on right side when browser is resized) – chris.antonellis Sep 17 '12 at 18:35
  • Thanks Chris and Abody for your input. Actually, my intention was making the background image scroll together with the elements, if you know what I mean. Setting background-attachment to fixed will "fix" it to the viewport and not to the document. Scroll all the way to the left and you'll see what I mean. – jonr Sep 17 '12 at 18:39
  • I'm accepting this post because of your answers to 1-2-3- and 4, which was really what I was interested in. Your workaround does not do it for me. At least now I know it's not just me... Thanks. – jonr Sep 20 '12 at 21:15