Question

I am trying apply two background images for an entire table row. One background image will make my table row look bit bluish and another image will appear on the right most side of table row.

I searched Google and found a small css snippet but it did not work:

.TdStyle{
    background-image: url(images/buttonback.png) left repeat, 
                      url(images/down_arrow.png) right no-repeat;
}

Please guide me how to do so.

Answer 1

Not a clean way but the only way that I know:

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;

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>

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 forget to change the image file references to point to your images. Naturally this can be applied to any element from the tag to a

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.

Source: http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html