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:

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.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.