What is the css background property? How to implement multiple attributes-CSS Tutorial-php.cn

What is the css background property? How to implement multiple attributes

云罗郡主

Release： 2018-11-08 15:35:47

Original

2378 people have browsed it

What is the css background attribute? What are the css background properties? I believe that many friends who have just come into contact with CSS will have such questions. This chapter will introduce to you what the css background attribute is? How to implement multiple attributes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. [Recommended reading: How to set 4 rounded corners in css? css set 4 rounded corners method】

CSS multi-background property is used to add one or more images at a time without using HTML code. We can add images as per our requirement. An example syntax for multiple 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;}

Copy after login

The properties appear as follows:

What is the css background property? How to implement multiple attributes

The following is an example demonstrating multiple 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.php.cn</h1>
         <p>
           php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
         </p>
      </div>
      
   </body>
</html>

Copy after login

The effect is as follows:

What is the css background property? How to implement multiple attributes

You can also set the size of the background:

Multiple background attributes add different sizes to different images. The sample syntax is as follows:

#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;}

Copy after login

As shown in the above example, each image has specific dimensions of 50px, 130px and auto-size.

The above is about what is the css background attribute? For a complete introduction on how to implement multiple attributes, if you want to know more about CSS3 video tutorials, please pay attention to the PHP Chinese website.

The above is the detailed content of What is the css background property? How to implement multiple attributes. For more information, please follow other related articles on the PHP Chinese website!