Liquid faux columns with background-size

200718 Sep
Liquid faux columns with background-size
by Peter Gasston
Posted in Browsers, CSS3 Previews, Tutorials
Tweet

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns. This is a good technique, but the drawback is that it only works 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 maths to create a variable-width effect.

With the (tentative) 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.

Take a look at this example (only tested in Safari 3 and Opera 9.5; may work in Konqueror 3.5.7 also). If you resize your browser window, the text and columns should maintain their proportions.

The way this is done is with a simple PNG image; I’ve made it 1000px wide, with two coloured columns of 250px each, so that it’s easier to calculate column widths (25%,50%,25%).

I’ve set this as the background-image 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 my 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%;
```
You’ll notice that the 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. I haven’t tested this thoroughly yet, so I’m not sure if this is a persistent bug or if there’s something I’m doing wrong. Anyway, Opera 9.5 behaves as expected.

After that I’ve added the background-position and background-repeat declarations; 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.

Apart from a little tidying up, that’s it; once the module becomes a recommendation and the browser-specific prefixes are dropped, it will require only a few lines of code for the simple effect. In the meantime, remember that this is for experimentation purposes only and shouldn’t be used in a live environment. This is just a sketch of the technique at the moment, and requires more testing.
You can skip to the end and leave a response.
Comments
- 01.
  
  CSS3 Tutorials for Web Development | Pixel2Pixel Design says:Comment » September 16th, 2011 at 4:22 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 02.
  
  24个为Web开发人员准备的CSS3实用教程 - 炫意 HTML5 says:Comment » September 21st, 2011 at 7:12 am
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 03.
  
  24个为Web开发人员准备的CSS3实用教程 | isir me says:Comment » October 30th, 2011 at 10:41 am
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 04.
  
  50+ Web Development Tutorials of CSS3 | Designs Palace says:Comment » February 11th, 2012 at 11:49 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 05.
  
  200718 Sep Liquid faux columns with background-size « madaninfo says:Comment » February 14th, 2012 at 10:09 pm
  
  […] can skip to the end and leave a response. Share this:TwitterFacebookLinkedInEmailPrintLike this:LikeBe the […]
- 06.
  
  Ultimate Collection of CSS3 Tutorials and Techniques | CollegeGFX says:Comment » April 20th, 2012 at 2:59 am
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 07.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Help 101 says:Comment » May 18th, 2012 at 1:23 am
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 08.
  
  109 Awesome CSS3 Tutorials & Resources | Internet Web Hosting Blog says:Comment » August 6th, 2012 at 3:26 am
  
  […] with pure CSS • Animated navigation menu with CSS3 • Sweet ajax tabs using jQuery and CSS • Liquid faux columns • CSS3 template layout […]
- 09.
  
  30+ Great Tutorials for WEB DEVELOPMENT USING CSS3 | Tutsgeek.com says:Comment » October 17th, 2012 at 12:13 am
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 10.
  
  54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer - PelFusion says:Comment » November 7th, 2012 at 7:17 pm
  
  […] are all about preparing for the future of web design (and just doing some really cool stuff).3. Liquid Columns with Background SizeUntil the Advanced Layout and Grid Layout modules are implemented, we have to get by with the […]
- 11.
  
  CSS3 Tutorials for Web Development @ dodo糯 says:Comment » December 27th, 2012 at 12:13 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 12.
  
  24个为Web开发人员准备的CSS3实用教程 @ dodo糯 says:Comment » January 15th, 2013 at 4:06 pm
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 13.
  
  50 Excellent Tutorials for Web Development Using CSS3 | Dzinepress says:Comment » August 21st, 2013 at 10:30 am
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 14.
  
  70 Best HTML5 and CSS3 Tutorials says:Comment » October 16th, 2013 at 2:59 pm
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

META2

TAG CLOUD

CSS3

Comments