Problem
One of the biggest annoyances with CSS2, is the inability to apply more than one background image to a box.So far the only real way to achieve such effects was to layer elements on top of each other and giving each one part of the combined background. Unfortunately this approach usually bloats the HTML with superfluous and semantically meaningless elements.
Solution
Luckily, the current draft specification for the CSS3 Backgrounds and Borders Module includes support for multiple, background images on a single element! This feature is supported by: Apple's Safari web-browser since version 1.3, other browsers now also support CSS3 multiple backgrounds: Firefox >= 3.6, - Konqueror >= 3.5, - OmniWeb >= 5.5, - Nokia's S60 Browser (included in S60 3rd edition and up), - Safari on the Apple iPhone, - Opera >= 10.5, - and Googles Chrome >= 3.5 which uses the webkit engine, (Safari). It is even possible to have 2 background images in IE, using the IEFilter: AlphaImageLoader.
Detailed explanation
One of the biggest problems with using the CSS3 Multi-backgrounds is that it is not usable in Internet Explorer, however by using the: 'AlphaImageLoader IEFilter', it is possible to place two background images in an element.
One advantage to using this IE specific filter is that it retains any alpha transparency that is applied to png's, without the requirement of any htc or javascript 'fixes'. The main disadvantage is that the image displays in the top, left-hand corner, and cannot be positioned.
The CSS3 for multiple backgrounds is achieved via a comma seperated list for the properties:
background-image: url(../images/lakeside2.png),
url(../images/lilys.jpg);
background-position: top left, bottom right;
The HTML:
<div id="multipleBackgroundImages">
<p>This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.</p>
<p class="no_colour"><strong><br />
These three paragraphs are inside of a div that has multiple background images.</strong>
The background color removed .</p>
<p>This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.
This is just some filler content to make the paragraph larger.</p>
</div>
The CSS:
#multipleBackgroundImages {
background-image: url(../images/lakeside2.png),
url(../images/lilys.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat;
border: 1px solid black;
padding: 0 1em;
}
#multipleBackgroundImages .no_colour {
background-color: transparent;
}
#multipleBackgroundImages p+p+p {
background-color: #ffc;
padding: 1em;
}
<!--[if gt IE 7]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
zoom: 1;
}
/* Now lets make it IE8 Multi-background images */
#multipleBackgroundImages {
background-image: url(../images/lilys.jpg);
background-position: bottom right;
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')";
border: 1px solid black;
padding: 0 1em;
}
/* Fix for IE clearType */
#multipleBackgroundImages p {
position: relative; /* required to re-enable IE's clearType */
}
</style>
<![endif]-->
For IE6/7 you would use the following for the IE filter:
filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='../images/lakeside2.png', sizingMethod='crop');
IE Filter options:
sizingMethod='crop' will retain the image dimensions, if this is changed to, sizingMethod='scale' the image will resize to the size of the element it is applied to, (auto resizable background image!).
Don't forgert to change the image file references to point to your images. Naturally this can be applied to any element from the <body> tag to a <p> tag.
Problem: The filter does not apply at all
A filter does solely apply to elements that have "layout", that is the reason for the zoom: 1; property.
If you have multiple "standalone" versions of IE installed, say IE7 side-by-side IE6. The Conditional Comment may not work as intended because the version vector of such a combo is normally the version of the newest browser, i.e. 7.xxxx, therefore, [if lt IE 7] does not match for IE6's parser in this constellation.
IMPORTANT: The IE9 preview has changed how the IE alpha image loader works, (or does not work at all in some cases). If you have the IE9 preview installed it is possible that this 'solution' will appear to not work at all in any version of IE.
The following screenshot shows the filter applied to IE, (top) and the CSS3 Multi-background applied to Safari, (bottom):
View the demo at:-
http://www.pziecina.com/design/turorial_demos/multi_bg_images.php
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
