Using faux columns is a technique to create a background image which simulates equal-height columns. However, the drawback with the simple technique that was used previously was that it only worked with fixed-width columns. That problem was overcome with the advent of liquid faux columns, which uses some background-position trickery and a bit of math to create a variable-width effect. With the introduction of background-size in Safari and Opera, however, faux columns are about to become a lot easier; all you need to do is create a background image and assign a percentage value to background-size, allowing the image to expand or contract with its containing box.

The way this is done is with a simple PNG image; here we’ve made it 1000px wide, with two colored columns of 250px each, so that it’s easier to calculate column widths. The background-image has been set on the html element, which has been assigned a width of 90%. Inside this there is a container div with a width of 100%, and three columns with the widths set at the same ratio as the background image:

<div id="container">
<div id="one"> </div>
<div id="two"> </div>
<div id="tre"> </div>
</div> 

#container {
position: relative;
width: 100%;
} 

#one {
margin: 0 25%;
} 

#two, #tre {
position: absolute;
top: 0;
width: 25%;
} 

#two {
left: 0;
} 

#tre {
right: 0;
}

The html element has the background-size declaration applied to it, with a percentage value to make it liquid, using the browser-specific prefixes followed by the proposed declaration (for safety):

html { background-image: url(‘opera_bg.png’); -khtml-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 90%; background-size: 100%; background-position: 50% 0; background-repeat: repeat-y; width: 90%;

Webkit value is different from the others; during this test, it seems that Webkit obtains its width from the entire browser window, not from the containing element; therefore, we have to set this value to be equal to the width of the containing element. After that the background-position and background-repeat declarations have been added; background-repeat to tile the image down the page, and background-position because Webkit seems to ignore the margin values and puts the image at top left of the browser window; this is only necessary if you’re centre-aligning your page. This was just a short glimpse at the technique whose applications can further be explored.

Related articles:

1. Background Images – Classic CSS and CSS3
2. Creating Accordion with CSS3 and JQuery
3. Creating 3D Animations in CSS3
4. CSS3: Unique Features
5. 3D Lightbox animation image gallery with CSS3

Tagged as: css, css backgrounds, css liquid faux columns, css3