CSS3 - Multi Background


Advertisements


Multi Background

CSS Multi background property is used to add one or more images at a time without HTML code, We can add images as per our requirement.A sample syntax of multi background images is as follows −

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

the most commonly used values are shown below −

Values Description
background Used to setting all the background image properties in one section
background-clip Used to declare the painting area of the background
background-image Used to specify the background image
background-origin Used to specify position of the background images
background-size Used to specify size of the background images

Example

Following is the example which demonstrate the multi background images

<html>
   <head>
   
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
      
   </head>
   <body>
   
      <div id="multibackground">
         <h1>www.tutorialspoint.com</h1>
         <p>Tutorials Point originated from the idea that there exists a class of  readers who respond better to online content and prefer to learn new skills at 
         their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in  2006 and elated by the response it generated, 
         we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on 
         topics ranging from programming languages to web designing to academics and much more..</p>
      </div>
      
   </body>
</html> 

It will produce the following result −

Size of Multi background

Multi background property is accepted to add different sizes for different images.A sample syntax is as shown below −

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

As shown above an example, each image is having specific sizes as 50px, 130px and auto size.



Advertisements