Background Images and Percentage Positioning

With the ideology of ‘responsive web design’ flooding our industry with new thinking, Ethan Marcotte has released his coveted book entitled “Responsive Web Design”.

A few of us at Digital Results have been reading through the ideas and examples from the book and we’ve been exploring some of the thinking behind the ideas that Ethan expresses.

We found particular interest in the solution to “Flexibly Tiled Background Images”. Ethan discusses a 2 column layout where a portion of the content has a different background:

A traditional solution to this problem is to vertically repeat (repeat-y) a short image on the container of those 2 columns, allowing for the image to spread as tall as the containing content. For example:

#content { background-image: url('content.jpg') repeat-y; }
/* Image is the width of #content, and usually 20-30px in height */

---

The problem with this approach when we’re thinking about responsive web design is that we need to produce an image that keeps it’s transition point (where the background changes) in the same spot (%).

Ethan’s solution made perfect sense;

1. Create an image wider than it will ever need to be (say 3000px)
2. Position the transition point at the same % on the x axis as per the design.
3. Position the background image at said % on the containing element with CSS

Now as the container expands/contracts to different widths, the percentages keep the transitional point in the same place.

We wanted to talk a little about why this technique works, touching on how CSS actually deals with %s on background images and why that fits in with the problem we’re trying to solve.

---

Building our image

Let’s take a look at our original image a little closer, in order to find our requirements:

Now that we know our transition point (59.53125%), we need to produce a very wide version of the above image (we’ll try 3000px). We’ll use the following formula to find our transition point:

---

Total width of image _x Percentage = Origin point _px

3000_px x 0.5953125 = 1785.9375_px

---

We’ll round that to 1786px, our new transition point.

Here’s the new image (click to view at 100%):

---

Writing our CSS

Here’s how background-positions work in CSS:

1. The value given for the x-axis becomes the origin point on the container. So if our container is 640px wide, and we set x-axis to 50%, the origin point is 320px in from the left.
2. The same percentage is then found on the background image, so if our background image is 1000px wide, the transition point marked on the image is 500px in from the left.
3. Now all that happens is the the image’s transition point will always sit at the origin point.

With that in mind, we can write our finalized CSS!

#content { background: url('content-3000.jpg') 59.53125% 0 repeat-y }

Now no matter what width our #content is being drawn at, the background image will always be correct.

View the demo