Hi and welcome to this week’s web design video blog. You may remember earlier this year we did a video on CSS3 Text Shadows and asked if it was time to start using them yet. Another impressive and eagerly anticipated CSS3 update is the ability to use multiple backgrounds on a single HTML element. Like Text Shadows, not many people realise that CSS3 Multiple Backgrounds are now supported by FireFox, Safari and Chrome and now Internet Explorer 9.
Click the image above to view the live example from the video.
If you choose to use CSS3 multiple backgrounds in your coding, and we should point out that not many people are yet; you have to consider how your website is going to display for people using Internet Explorer 6,7 or 8. Your multiple background declarations will be ignored on Internet Explorer, which could drastically effect the presentation of your website. If however your multiple background images are subtle, like thin shadows or rounded corners for example, then you may be able to get away with them not being noticed.
So, in our opinion, CSS3 Multiple Backgrounds are great, they give you the ability to apply and position multiple images to liquid HTML elements without the complicated work-arounds of nesting.
But unless you’re prepared for the incompatibility with Internet Explorer, we’d sit on this one for a while.
CSS3 Multiple Backgrounds
#example {
background: url(images/top.jpg) top no-repeat,
url(images/bottom.jpg) bottom no-repeat,
url(images/middle.jpg) repeat-y;
}
Really love this post and the CSS3 multiple background example is very smart. I have never really looked into multiple backgrounds but it is certainly a good thing to know… especially for something like a news or twitter feed.
How exactly does IE 6, 7 & 8 render this technique?
One more thing… In the example I will admit that this is an acceptable use for Comic Sans.
Very informative video on developments in CSS3. I was a little bit frustrated by the fact that I could not take the video to full screen as I would have liked a closer look at the code.
Hi Joe, we’re currently working on a new skin for the plugin. You can also watch this video in HD on YouTube http://www.youtube.com/watch?v=a10S0VMZsyE where you can full-screen the video.
Thanks for the nice Article. keep your good job up.
Hey Matt, IE6-8 simply ignores the background images, falling back on the background-colour (if specified). I always jump at the chance to get away with Comic Sans!
There is a fallback for multiple backgrounds: declare a single background before (cascade effect) the multiple backgrounds declaration in the CSS rule.
Browsers that don’t support the feature shows up the single background.
I hosted your example with the fallback at: http://www.maujor.com/temp/mbfallback.html.
I agree with Matt – multiple backgrounds are a good thing to be aware of. I’ve sent a link to this to my web design colleagues in Cardiff.