Liquid layouts, background-position, and percentages

In a recent web design project I’ve been fiddling around with liquid layouts (i.e. layouts which change size depending on font sizes defined by the browser or the browser’s windows size). The faux columns technique described by Dan Cederholm has already been an often used tool in my development projects, so creating equal height columns wasn’t a new prospect.

Because of the design, I wanted to use percentages as the widths of the two columns. In this case, I wanted the main content to span the first 70% and the sidebar should take up the rest. Positioning the background became a challenge for me that I needed to find a way to overcome.

The CSS spec defines background-position with percentage values as:

With a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of the box’s padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of padding area. With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

Now that I’ve understood how it all works, the definition is clear. But when I was trying to get the background to position itself correctly (=the way I wanted it) I couldn’t figure out what that part of the spec was trying to say. My understanding of it and the way browsers behaved were so far apart.

After several unfruitful searches I finally managed to find an article on Community MX that described the behavior in an easily understandable way. All I needed to remember was that the percenteges were relative to the box’s padding edge and the background image’s edges.

Thus, in this case the background needed to have 70% of its width covered in the main content’s background color and the remaining 30% in the sidebar’s background color. Now the CSS for background-position: 70% 0%; works as intended.