Looking into CSS3 Multiple backgrounds

In this post I will be looking into a great feature in CSS3 called multiple backgrounds.With CSS3 ourselves as web designers we can specify multiple background images for box elements, using nothing more than a simple comma-separated list.

This is a very nice feature that can be useful in many websites.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Multiple backgrounds from the latest versions of modern browsers.

Please have a look in this link

All modern browsers support this feature. I am typing this very simple HTML 5 markup with an internal CSS style.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Sold items</title>
   
    <style>
   
   
        #box{
        border:1px solid #afafaf;
        width:260px;
        height:290px;
        background-image:url(shirt.png), url(sold.jpg);
        background-position: center bottom, right top;
        background-repeat: no-repeat, no-repeat;
    </style>
   
</head>

  <body>
    <header>
   
   
        <h1>CSS3 Multiple backgrounds</h1>

    </header>
   
   
   <div id="box">
   
     
    </div>

   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>

  
  </body>
 
</html>
 

Let me explain what I do here, multiple background images are specified using a comma-separated list of values for the background-image property.

A comma separated list is also used for the other background properties such as background-repeat, background-position .

So in the next three lines of CSS code

        background-image:url(shirt.png), url(sold.jpg);
        background-position: center bottom, right top;
        background-repeat: no-repeat, no-repeat;

we have 2 images placed in the div element. The first is placed center bottom in the div element and the second is placed at right top position inside the div element.Both images do not get repeated.

I view the page in IE 10 and all the latest versions of Opera,Chrome and Firefox.

Have a look at the picture below.

 

Hope it helps!!!!

No Comments