-
200718 Sep
Posted in Browsers, CSS3 Previews, Tutorials
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
andbackground-repeat
declarations;background-repeat
to tile the image down the page, andbackground-position
because Webkit seems to ignore themargin
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.
Faux Columns líquido mediante CSS3…
Mediante la propiedad background-size…
-
02.
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.
@John: we should test how background-size and multiple backgrounds go together :)
-
04.
@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.
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.
@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.
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.
[…] 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.
[…] 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.
[…] Liquid Faux Columns With Background-Size – Peter Gasston […]
-
14.
[…] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
-
15.
[…] 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.
[…] 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.
[…] Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier. […]
- 24.
-
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.
[…] 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.
[…] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体(自适应)栏式布局的教程。 […]
-
37.
[…] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体(自适应)栏式布局的教程。 […]
-
38.
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.
[…] 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.
[…] 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.
-
46.
[…] Liquid Faux Columns with Background-Size – 使用背景尺寸属性创建液体(自适应)栏式布局的教程。 […]
- 47.
-
48.
109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog says:Comment » July 30th, 2011 at 1:45 pm
[…] Columnas con CSS3 […]
-
49.
[…] pure CSS • Animated navigation menu with CSS3 • Sweet ajax tabs using jQuery and CSS • Liquid faux columns • CSS3 template layout […]
- 50.
-
01.