Home > Article > Web Front-end > What is the css background property? How to implement multiple attributes

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

云罗郡主Original: 2018-11-08 15:35:342250browse

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

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to add text on image using HTML and CSS? (code example)Next article：How to add text on image using HTML and CSS? (code example)

See more

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

Related articles