CSS3: Creating Liquid Faux Columns with Background
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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.
BlueHost | HostGator | Media Temple
