English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS3 - Multi Background
  • 时间：2024-09-17

CSS3 - Multi Background

Previous Page Next Page  

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 −

Sr.No. Value & Description
1

background

Used to setting all the background image properties in one section
2

background-cpp

Used to declare the painting area of the background
3

background-image

Used to specify the background image
4

background-origin

Used to specify position of the background images
5

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>
   
      <span 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 onpne 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 
            alped articles on topics ranging from programming languages to web designing 
            to academics and much more..
         </p>
      </span>
      
   </body>
</html>

It will produce the following result −