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.
  
  webeame.net says:Comment » September 18th, 2007 at 9:42 pm
  
  Faux Columns líquido mediante CSS3…
  
  Mediante la propiedad background-size…
- 02.
  
  John Faulds says:Comment » September 19th, 2007 at 5:03 am
  
  That’s pretty cool and something that I see getting asked for repeatedly on forums! However, I rarely use the faux columns technique with just simple solid-coloured bg-images; there’s usually shadows or borders as part of the image which probably aren’t going to look that great when stretched and compressed.
- 03.
  
  Joost de Valk says:Comment » September 19th, 2007 at 8:06 am
  
  @John: we should test how background-size and multiple backgrounds go together :)
- 04.
  
  Peter Gasston says:Comment » September 19th, 2007 at 8:48 am
  
  @John: That should be easier to do with SVG backgrounds, which shouldn’t distort as much when resized. I’ve yet to seriously test it, however.
- 05.
  
  Joost de Valk says:Comment » September 19th, 2007 at 8:48 am
  
  I’ve done that once, I think WebKit supports that pretty well…
- 06.
  
  Daniel Luz says:Comment » September 19th, 2007 at 9:31 am
  
  The example is a bit off on Safari; I guess you meant to set -webkit-background-size to 100%, like the others?
- 07.
  
  Peter Gasston says:Comment » September 19th, 2007 at 9:43 am
  
  @Daniel: No, I’d forgotten to upload the most recent example! I don’t have a copy of Safari 3 to hand right now, but that should work now.
- 08.
  
  Adrian says:Comment » September 21st, 2007 at 12:03 am
  
  Really interesting technique, looks nice in Opera 9.5
  Let’s just hope all the browsers catch up fast enough and make the developer’s lives easier :)
- 09.
  
  Fatih Hayrioğlu’nun not defteri » Haftalık haberler says:Comment » September 25th, 2007 at 9:59 pm
  
  […] CSS3 ile gelen background-size yardımı ile likit aksak kolon sorunun çözümü. Link […]
- 10.
  
  BlueBoden says:Comment » September 28th, 2007 at 2:09 pm
  
  i advise ageinst using the background-image solution, if you got the time to experiment.
  
  Im just saying without going into to much detail:
  It is indeed possible to achive in other more effective ways.
  
  Btw, the examble dosent display the intended way for me, and im using IE7 as my standard browser.
  
  I’m aiming for IE6-7, FF and Safari, with the above.
- 11.
  
  links for 2007-11-12 « D e j a m e S e r says:Comment » November 12th, 2007 at 5:18 pm
  
  […] Liquid faux columns with background-size – CSS3 . Info (tags: layout) […]
- 12.
  
  20 Very Useful CSS3 Tutorials | Speckyboy - Wordpress and Design says:Comment » April 22nd, 2008 at 8:28 pm
  
  […] 3.Liquid faux columns with background-size the CSS3 way […]
- 13.
  
  WEB 3.0 » Blog Archive » �As� que quer�as saber de CSS? says:Comment » April 18th, 2009 at 3:24 am
  
  […] Liquid Faux Columns With Background-Size – Peter Gasston […]
- 14.
  
  Carsonified » 30 Essential CSS3 Resources says:Comment » July 17th, 2009 at 1:36 pm
  
  […] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 15.
  
  30 Essential CSS3 Resources - Programming Blog says:Comment » July 18th, 2009 at 2:05 am
  
  […] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 16.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources - Iconlandia says:Comment » August 10th, 2009 at 5:07 pm
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 17.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources - Programming Blog says:Comment » August 13th, 2009 at 2:50 am
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 18.
  
  70+ 必备的 CSS3 和 HTML5 教程资源 says:Comment » August 14th, 2009 at 1:39 pm
  
  […] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体（自适应）栏式布局的教程。 […]
- 19.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources | huibit05.com says:Comment » August 20th, 2009 at 10:07 am
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 20.
  
  50+ Stunning CSS3 Resources, Cheat Sheets and Tutorials | tripwire magazine says:Comment » August 27th, 2009 at 9:45 pm
  
  […] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 21.
  
  CSS3 y HTML5: Tutoriales y recursos para el nuevo diseño web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog says:Comment » August 31st, 2009 at 10:46 am
  
  […] Liquid Faux Columns with Background-Size – Tutorial sobre la creación de columnas liquid utilizando la propiedad background-size. […]
- 22.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources « Adept - Design & Development Royalty says:Comment » September 2nd, 2009 at 10:30 pm
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 23.
  
  Sr Anou » Blog Archive » Recursos CSS3 says:Comment » September 15th, 2009 at 7:38 pm
  
  […] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 24.
  
  Hintergrundbild per CSS auf Aufl�sung anpassen. - XHTMLforum says:Comment » December 20th, 2009 at 11:53 pm
  
  […] […]
- 25.
  
  CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | CSS3 Tutorials | CSS 3 Gallery says:Comment » January 16th, 2010 at 6:38 pm
  
  […] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 26.
  
  SmashingWebs: Online Show case for Designers » » 50 CSS3 Tutorials That Makes Your Works Perfect says:Comment » January 17th, 2010 at 7:52 am
  
  […] 29. Liquid Faux Columns with Background-Size […]
- 27.
  
  50 CSS3 Tutorials That Makes Your Works Perfect – multimediaDev says:Comment » January 17th, 2010 at 12:06 pm
  
  […] 29. Liquid Faux Columns with Background-Size […]
- 28.
  
  25 Essential Tutorials And Resources For Learning CSS3 | CSS Reflex - Design Blog | Web Design | Inspiration and Resources for Designers says:Comment » February 9th, 2010 at 4:26 am
  
  […] 9. Liquid Faux With Background Size […]
- 29.
  
  Css3 kaynakları | kaynaklar says:Comment » February 9th, 2010 at 2:02 pm
  
  […] 9. Liquid Faux With Background Size […]
- 30.
  
  54 Awesome Tutorials for Any Web Developer | The Technology Reports says:Comment » February 22nd, 2010 at 4:23 pm
  
  […] 3. Liquid Columns with Background Size […]
- 31.
  
  CSS3: 20 tutoriales | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog says:Comment » March 21st, 2010 at 11:37 am
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 32.
  
  20+Best Tutorials for Custom Web Development Using CSS3 Web Design Blog says:Comment » March 30th, 2010 at 3:10 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 33.
  
  70 Fantastic CSS3 and HTML5 Tutorials and Resources | Designer Wall says:Comment » April 3rd, 2010 at 9:14 pm
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 34.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources | WebMasterSide.net | Web Resource Center says:Comment » April 27th, 2010 at 11:04 am
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 35.
  
  50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs says:Comment » June 29th, 2010 at 7:37 pm
  
  […] 29. Liquid Faux Columns with Background-Size […]
- 36.
  
  HTML5 和 CSS3 教程资源大网罗 says:Comment » July 1st, 2010 at 9:18 pm
  
  […] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体（自适应）栏式布局的教程。 […]
- 37.
  
  70个必备的CSS3和HTML5教程资源 says:Comment » July 14th, 2010 at 8:44 am
  
  […] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体（自适应）栏式布局的教程。 […]
- 38.
  
  wholesale designer clothes says:Comment » September 6th, 2010 at 10:37 am
  
  http://siteexplorer.search.yahoo.com
- 39.
  
  Ultimate Collection of CSS3 Tutorials and Techniques – AE Tuto says:Comment » September 21st, 2010 at 2:16 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 40.
  
  An (Almost) Complete Guide to CSS3 Borders & Backgrounds | kmsm says:Comment » October 4th, 2010 at 3:10 pm
  
  […] Another interesting technique for background-size is defining it as 100%. We can achieve some really cool effects this way. Peter Gasston covers one such example in his article Liquid Faux Columns with Background-Size. […]
- 41.
  
  50 полезных уроков для веб разработчика (часть 1) says:Comment » October 25th, 2010 at 5:22 pm
  
  […] 3. Трюк с фоном шаблона. […]
- 42.
  
  70 Must-Have CSS3 and HTML5 Tutorials and Resources - NAGPUR CITY says:Comment » November 13th, 2010 at 6:08 am
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 43.
  
  Html5 Solution says:Comment » December 26th, 2010 at 8:28 pm
  
  […] Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property. […]
- 44.
  
  odishawebdesign.com :: Blog » Blog Archive » 20 Very Useful CSS3 Tutorials says:Comment » February 1st, 2011 at 2:04 pm
  
  […] 3.Liquid faux columns with background-size the CSS3 way […]
- 45.
  
  Cgbaran says:Comment » February 3rd, 2011 at 7:50 pm
  
  Great tutorial thanks
- 46.
  
  70+ 必备的 CSS3 和 HTML5 教程资源 | 玩转前端 says:Comment » March 8th, 2011 at 6:46 am
  
  […] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体（自适应）栏式布局的教程。 […]
- 47.
  
  Web sites: Design Techniques and layouts « Randeep Singh says:Comment » July 26th, 2011 at 8:48 am
  
  […] http://www.css3.info/liquid-faux-columns-with-background-size/ […]
- 48.
  
  109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog says:Comment » July 30th, 2011 at 1:45 pm
  
  […] Columnas con CSS3 […]
- 49.
  
  CSS3 Tutorial and Resoruces | Avazio says:Comment » August 17th, 2011 at 4:55 pm
  
  […] pure CSS • Animated navigation menu with CSS3 • Sweet ajax tabs using jQuery and CSS • Liquid faux columns • CSS3 template layout […]
- 50.
  
  CSS3 background-size özelliği « aHmetfatiH says:Comment » August 20th, 2011 at 12:03 pm
  
  […] http://www.css3.info/liquid-faux-columns-with-background-size/ (esnek ardalan) […]
- 51.
  
  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 […]
- 52.
  
  24个为Web开发人员准备的CSS3实用教程 - 炫意 HTML5 says:Comment » September 21st, 2011 at 7:12 am
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 53.
  
  24个为Web开发人员准备的CSS3实用教程 | isir me says:Comment » October 30th, 2011 at 10:41 am
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 54.
  
  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 […]
- 55.
  
  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 […]
- 56.
  
  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 […]
- 57.
  
  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. […]
- 58.
  
  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 […]
- 59.
  
  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 […]
- 60.
  
  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 […]
- 61.
  
  CSS3 Tutorials for Web Development @ dodo糯 says:Comment » December 27th, 2012 at 12:13 pm
  
  […] Liquid faux columns with background-size the CSS3 way […]
- 62.
  
  24个为Web开发人员准备的CSS3实用教程 @ dodo糯 says:Comment » January 15th, 2013 at 4:06 pm
  
  […] 4. Liquid faux columns with background-size the CSS3 way […]
- 63.
  
  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 […]
- 64.
  
  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

CATEGORIES

FRIENDS

Meta

Hosting by:

CSS3

Comments