Detailed explanation of common related properties of CSS background images

A must-read for zero basics of HTML - getting started with HTML, programming is so simple

Chapter 7: Background Properties

Summarize

1. What is background?

Background: Renders the background layer of browser elements. The background attribute is used to set the background color or background image effect of the box, etc.

The background is below the content layer. A 3D diagram of the stacking relationship between the background and the content:

2.background-color background color

For attribute values, please refer to the color value method in the previous chapter.

3.background-image background image

Property value:

none Default value, no background image is inserted

The url ("write path") can be imported using relative paths and network paths.
Note: The selected background image can be smaller in size, otherwise the default tiling method will not be visible.

4.background-repeat background image tiling method

Property value:

repeat defaults to a tiled background image

no-repeat does not tiling

no-repeat does not tiling

repeat-x tiles horizontally (left and right)

repeat-y tile vertically (up and down)

<style>
        .div1{
      
      
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 背景色是默认会延伸到边框的下方  */
            background-color: skyblue;
        }
        .div2,.div3,.div4,.div5,.div6{
      
      
            /* 为了便于观察，使几个div变成行内块元素 */
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;

            /* background-image 背景图片 
            属性值：
            none 默认值，不插入背景图片
            url ("写入路径") 可用相对路径引入和网络路径引入。
            选的背景图片可尺寸比较小的，不然看不出来默认平铺方式  */
            background-image: url(./img/5.jpg);
        }

        
        /* background-repeat 背景图片平铺方式 */
        .div3{
      
      
            /* repeat 默认是背景图片平铺的 */
            background-repeat: repeat;
        }
        .div4{
      
      
            /* no-repeat 不平铺 */
            background-repeat: no-repeat;
        }
        .div5{
      
      
            /* repeat-x 水平方向平铺（左右） */
            background-repeat: repeat-x;
        }
        .div6{
      
      
            /* repeat-y 垂直方向平铺（上下） */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
</body>

Rendering:
Insert image description here

5. Background image size

Property value:

Set the width and height to numerical values or percentages respectively. For example, background-size: 100px 100px; set the width and height to numerical values or percentages respectively.

cover scales proportionally until it covers the X-axis and Y-axis

contain scales proportionally until one of the X or Y axes is covered (less used)

<title>背景图片大小</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        div{
      
      
            display: inline-block;
            border: 1px solid red;
            background-image: url(./img/2.jpg);   
        }
        .div1,.div2{
      
      
            width: 300px;
            height: 300px;
        }
        .div3,.div4{
      
      
            width: 500px;
            height: 500px;
        }

        /* background-size背景图片大小  */
        /* .div1{}原始背景不作改变 */
        .div2{
      
      
            /* 分别设置宽高 给数值，或百分比，*/
            background-size: 100px 100px;
        }
        .div3{
      
      
            /* cover 等比例缩放直到铺满X轴和Y轴； */
            background-size: cover;
        }
        .div4{
      
      
            /* contain 等比例缩放直到铺满X或Y轴其中一个； */
            background-size: contain;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

Rendering:
Insert image description here

6. Background image location

Property value:

background-position:XY; The default value of X and Y is: 0 0. The default is the upper left

The allowed values of x are: left, center, horizontal, center, right; percentage, px

Allowed values of Y: top top alignment center vertical center bottom bottom alignment; percentage, px

If only one value is given, the second value defaults to center (50%).
If the X-axis value and the Y-axis value are given as orientation (word) values, the order can be exchanged.

<head>
    <title>背景图片位置</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        div {
      
      
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background-image: url(./img/2.jpg);
            /* 引入背景图片后，设置背景图片大小，不平铺，用以观察背景图片位置 */
            background-size: 100px;
            background-repeat: no-repeat;
        }

        /*background-position 背景图片位置 */
        /* .div1{}不作设置，默认是位于左上角 */

        /* background-position:X Y; X和Y默认是：0 0
            x允许取值的方式：left左对齐  center水平居中 right右对齐；百分比，px
            Y允许的取值方式：top顶部对齐 center垂直居中 bottom底部对齐；百分比，px
            如果只给一个值，那么第二个值默认center（50%）;
            X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。
            */
        .div2 {
      
      
            /* background-position: 100px 50px; */
            /* background-position: 100px bottom; */
            background-position: right top;
        }

        .div3 {
      
      
            /* 如果只给一个值，那么第二个值默认center（50%） */
            /* background-position: 100px; */
            /* background-position: center; */

            /* 背景位置的拆分写法  */
            /* 水平背景的位置 */
            background-position-x: 100px;
            /* 垂直背景位置 */
            background-position-y: 0px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

Rendering:
Insert image description here

7.background-attachment background image fixed

background-attachment: fixed The background does not scroll with scrolling

background-attachment: scroll; default value, the background scrolls with scrolling

<head>
    <title>背景图像固定</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        body {
      
      
            background-image: url(./img/2.jpg);
            /* 让背景图充满整个屏幕 */
            background-size: cover;

            /* background-attachment: fixed 背景不随滚动而滚动
            background-attachment：scroll; 默认值，背景随滚动而滚动； */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>

</body>

8. Comparison between background image and img tag

The background image does not occupy the content part, but the img tag does.

If the background image size exceeds the box, it will not be displayed, and if the img tag exceeds the parent box, it will exceed the display by default.

There is no definite standard for when to use background images and when to use img tags. You can make your choice based on the actual situation.

If you want to add a background color to the box, add a background to the content part, or add some small icons, bullets, etc., use a background image.

If you really want to express a picture information and want search engines to retrieve the corresponding picture information, use the img tag.

Summarize

The above is the background attributes compiled by the editor in this chapter, especially the background image-related attributes, which are explained in more detail. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.