Flexible Background Images

Contact Us or call 1-877-932-8228
Flexible Background Images

Flexible Background Images

Imagine that we wish to update the design of the Jazz Calendar site to add a graphic border between the left and right columns.

graphic border

An easy way to accomplish this is to use a background image - with the cream color on the left, the dusky blue on the right, and the stylized line running vertically at the border - and tile it vertically behind the main content div. But how to do so, given that our design is flexible - with neither column a fixed width?

We start with a background image that is large enough to handle the most wide browser window; we'll use a 3000-pixel-wide image. (This is the file FlexibleImages/Demos/images/bg_main.png.) To split the columns in the background graphic to fit the percentage widths of the two columns whose border we are creating, we would recall the original column pixel width as a percentage of the width of the container element (the #main div): 566px / 900px = 62.888889%. Thus the border in our graphic goes at 3000px * 62.888889% = 1887px. We can then use CSS's background-position rule to place the background image appropriately:

#main {
	margin:0 auto 5.888888% auto;
	background: #fff url('../images/bg_main.png') repeat-y 62.888888% 0;

Open the file FlexibleImages/Demos/flexiblebg.html in your browser to see the result.

Of course, we're not actually scaling the background image - just placing it appropriately for the relative widths of the columns.