In CSS, the background style has two aspects, the background color and the background image. The background color is set using the background-color property, while the background image has multiple properties.

First, the background color

The background color is set using the background-color property, which can be either a keyword or a hexadecimal RGB value. (Note the distinction between color, which sets the text color, and background-color, which sets the background color).

Second, the background picture

1. Background image style background-image

Set the background image with the background-image attribute url (). Be careful to add the width and height attribute to the element, otherwise the image will not display.

2. Background image repeats background-repeat

Use this property to define how the background image is repeated, with the following values:

Attribute values instructions
repeat Tiling in both horizontal and vertical directions (default)
repeat-x Tiling only in the horizontal direction
repeat-y Tiling only in the vertical direction
no-repeat Don’t spread

Note that the repetition effect only works if the width of the element is larger than the width and height of the background image, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                background-image: url(cat.svg);
                height: 100px;
                width: 100px;
                border: black 1px solid;
            }
            .div1{
                background-repeat: repeat;
            }
            .div2{
                background-repeat: repeat-x;
            }
            .div3{
                background-repeat: repeat-y;
            }
            .div4{
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </body>
</html>
Copy the code

It looks like this in the browser:

3. Background image position background-position

There are two values for this property, one is a pixel value and the other is a keyword.

  • Pixel values, with PX as the unit, the horizontal distance and vertical distance should be indicated at the same time.Background-position: horizontal distance vertical distance;, for example:
<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                background-image: url(cat.svg);
                height: 100px;
                width: 100px;
                border: black 1px solid;
                background-repeat: no-repeat;
                background-position: 20px 20px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

How it looks in the browser:

  • The keyword, vertical first and then horizontal, using mode:Background-position: vertical keyword Horizontal keyword;, horizontal keywords: left, center, right; The vertical keywords are top, center, and bottom. Their positions are mapped as follows:

Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                background-image: url(cat.svg);
                height: 100px;
                width: 100px;
                border: black 1px solid;
                background-repeat: no-repeat;
                background-position: center left;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

It looks like this in the browser:

4, background picture fixed background-attachment

This property is used to define whether the background image should scroll with the element or be fixed. The values are scroll (default) and fixed (fixed), as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                background-image: url(img.jpg);
                height: 1000px;
                width: 100vw;
                border: black 1px solid;
                background-repeat: no-repeat;
                background-position: top left;
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

The background image does not scroll while the scrollbar is scrolling:

Change background-attachment to scroll (or not, default is scroll), the background image will scroll along with the scroll bar: