How to set background properties in CSS (detailed explanation)

This article will explain in detail how to set the background attribute in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Background related attributes mainly include:

• background-color background color

• ##background-image background image

• background-repeat Whether to tile repeat (default tile) | repeat-x (horizontal tile) | repeat-y (vertical tile) | no-repeat (not tile)

• background-position background position length (percentage) | position (top center button left right) Generally, the two are used together. If one direction is specified and the other direction defaults to center, the two methods can also be mixed and matched. . There is no order distinction in positional nouns, but there is always an order when using percentages, first horizontally and then vertically

• background-attachment Is the background fixed or scrolling? fixed

• background: background color, background image, whether to tile, fixed or scrolling background, background position

  #p1 {
            width: 300px;
            height: 300px;
            background-color: blue;            /*默认是transparent透明的*/
            /* background-color: transparent; */
            background-image: url(Images/2.jpg);
            background-repeat: no-repeat;            /*不平铺，默认是水平垂直平铺*/
            /* background-repeat: repeat-y; */
            /* background-repeat:  repeat-x; */
            /* background-position: right bottom; */
            background-position: 10% center;
            background-attachment: fixed;
        }

If you want the background to be semi-transparent, use rgba(r, g b,a) when specifying the color. a means to specify the transparency

p {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.6);
        }

When you want to use multiple background images, use background to specify multiple URLs. Use ',' commas to separate each group. If the images overlap, the previous one will be overwritten. An image, but the overall background color must be specified after the last url.

p {
            width: 100%;
            height: 300px;
            background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;
        }

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit

CSS basic video tutorial , CSS3 video tutorial !

The above is the detailed content of How to set background properties in CSS (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!