CSS: Multiple Background images in Single style

Many a times we come to a situation where we need to show a gradient or a series of background images on div  s, tables, spans etc

Now the problem is that you can't specify more than one background image in single style but there is a hidden factor associated is that we can specify more then one background image in a single style ... see example below

.<ClassName>
{
background: url(images/contect-left.jpg) top left repeat-y,url(images/contect-right.jpg) top right no-repeat,url(images/contect-center.jpg) top left repeat-x;
}

This will basically add a rounded corners on left and right side and repeated same background on the content area. Sample shown below... Individual images also shown below

Now this would not go well if you need to change the gradient based on your content height... This will work with the width well but if you want that your gradient should expand with the content height as well then you need to make use of different styles and that too specific to the browser.. sample given below

#content {

    /* Mozilla: */

    background: -moz-linear-gradient(top, #E8F7FE, #FFFFFF);

    /* Chrome, Safari:*/

    background: -webkit-gradient(linear,

                left top, left bottom, from(#E8F7FE), to(#FFFFFF));

    /* MSIE */

    filter: progid:DXImageTransform.Microsoft.Gradient(

                StartColorStr='#E8F7FE', EndColorStr='#FFFFFF', GradientType=0);

}

This is tested on Mozilla Firefox, Chrome, Safari and Internet explorer but this would not give you the rounded corners. You need to make some more changes to make it happen for rounded corners and that is you need to create rounded corners based matching with the top most color of your gradient start color.

Hope this post will help you to solve the issue related to multiple background images in single style