❤️ Nearly 20000 words of CSS, master background, and this time help you thoroughly understand the background properties ❤️ (recommended Collection)

Author: Wang Min
Motto: try to do everything you like
CSDN original article
Blog address 👉 WangMin

In a project, the background attribute in CSS is usually used to set the background of a web page or an element for the beauty of a web page. This attribute is a very basic and commonly used style. How should this attribute be used? Let's have a look!!!

Syntax format of the background attribute

The background attribute can achieve the background effect through the following parameters:

background : background-color || background-image || background-repeat || background-attachment ||background-position|| background-size || background-origin||background-clip 

The above background attribute is actually a short form. Writing parameters in the background attribute can reduce the program reading time and web page rendering speed. Moreover, not all these parameters need to be written, and these parameters can also be used separately as attributes, which depends on your project requirements! So what do these parameters represent? What effect do they have?

1,background-color

This attribute will add background color to the whole element. The attribute value can represent the English color, which can be used in RGB (for reference) CSS3 use of RGB and RGBA (transparent color) ), you can use hexadecimal to represent the color, and transparent represents the transparent background color. For example:

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    background: #33CCCC;
}

The effect of the web page is as follows:

The color in the above case is represented by hexadecimal. If # the following hexadecimal number is two digits and two digits overlap, it can be abbreviated with the same effect. Therefore, the above case can be abbreviated as: #3CC. As shown below:

2,background-image

This attribute will add a background picture to the whole element. The attribute value is URL (picture path), for example:

<div class="box"></div>
.box{
    width:170px;
    height:170px;
    background: url("img/image.jpg") ;
}

The effect of the web page is as follows:

Relative paths are recommended for image paths here. Why use relative paths instead of absolute paths? Another problem to note is that when you introduce CSS files into HTML files alone, you need to pay attention to the reference of image paths. These two problems are often encountered in the project. They are very important and will be explained in detail later.

The size of the image here is the same as that of the element, so the image will cover all the elements. If the image size is inconsistent with the element size, you can use the following background repeat to solve this problem.

3,background-repeat

This attribute is usually used with the parameter background image to set whether the background image is tiled repeatedly in the horizontal and vertical directions. What does it mean? When the size of the image is smaller than the size of the element, whether to tile the image repeatedly until the element is covered. There are six attribute values: repeat, repeat-x, repeat-y, no repeat, round and space. Let's talk about their effects.

1). repeat

Completely tile, copy the picture, fill the whole element, and spread the elements horizontally and vertically, for example:

<div class="box"></div>
.box{
	width:300px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat ;
}

The effect of the web page is as follows:

2). repeat-x

Copy and tile the picture horizontally, and cover the elements horizontally, for example:

<div class="box"></div>
.box{
	width:600px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat-x ;
}

The effect of the web page is as follows:

3). repeat-y

Copy and tile the picture in the vertical direction, and spread the elements vertically, for example:

<div class="box"></div>
.box{
	width:600px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat-y ;
}

The effect of the web page is as follows:

4). no-repeat

Instead of tiling, only one image is used, usually when the image size is the same as the element size. The effect is the same as that in the case of background image, but a no repeat is added after the image path. The code is as follows:

.box{
    width:170px;
    height:170px;
    border:1px solid #ccc;
    background: url("img/image.jpg") no-repeat ;
}

5). round

Align and repeat the background image to both ends, and automatically scale the background image until it fits and fills the whole element. For example:

<div class="box"></div>
.box{
	width:300px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") round ;
}

The effect of the web page is as follows:

The effect of this attribute value is closely related to the size of the background image and the size of the element. Take the example given when talking about repeat. It can be seen that the second background image in the horizontal direction and the second background image in the vertical direction of the element are not displayed completely. If you want to display the second image in both directions completely, you need to scale the background image as a whole according to the size of the element, so that the background image can cover the whole element evenly. If you want the background image to cover the whole element completely and repeatedly, you can use the attribute value of round, which can automatically scale the whole background image and fill the whole element according to the element size.

6). space

Indicates that the background image is tiled at the same spacing and filled with the whole container or a certain direction, for example:

<div class="box"></div>
.box{
	width:600px;
	height:600px;
	border:1px solid #ccc;
	background: url("img/image.jpg") space ;
}

The effect of the web page is as follows:


The spacing between background images is related to the size of elements. It can automatically calculate the maximum number of background images in horizontal and vertical directions according to the size of elements, and set the corresponding spacing.

4,background-attachment

It is used to set whether the background image is scrolled or fixed with the element content. There are four attribute values, namely scroll, fixed, local and inherit. Let's talk about their effects.

1). scroll

Scroll is the default value of background attachment. It means that the background image follows the element (the element setting the background). It is fixed relative to the element. It will scroll with the element's scrolling (the element's scrolling will scroll with the page's scrolling), rather than with its content. Therefore, the background image does not move when the element's content scrolls.
For example:

<div class="box">
    <div class="inner">
        <p>1,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>2,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>3,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>4,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>5,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>
    </div>
</div>
body{
    height:2000px;
}
.box{
    width:700px;
    height:300px;
    border:1px solid #ccc;
    overflow:scroll;
    background: url("img/5.jpg") no-repeat scroll ;
}
.inner{
    width:700px;
    height:435px;
}

The effect of the web page is as follows:

If the element is a scrollable element, that is, the element has a scroll bar inside and overflow: scroll / auto is set, the background image will not scroll with its content, that is, the background image will not move when the element content scrolls, for example:

<div class="box">
    <div class="inner">
        <p>1,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>2,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>3,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>4,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>5,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>
    </div>
</div>
.box{
    width:700px;
    height:300px;
    border:1px solid #ccc;
    overflow:scroll;
    background: url("img/5.jpg") no-repeat scroll ;
}
.inner{
    width:700px;
    height:435px;
}

Before scrolling, the effect of the page is as follows:

After scrolling, the effect of the page is as follows:


Comparing the two renderings, after dragging the scroll bar, you can see that the position of the background image has not changed, but the position of the content in the element has changed, that is, the scrolling of the element content will not affect the position of the element background.

2). fixed

The background image is fixed relative to the upper left corner of the visible area of the page. It will only be fixed at a certain position in the page. When the element content scrolls, the image does not move, which is equivalent to that the background is set on the body. For example:

<div class="inner">
        <p>1,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>2,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>3,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>4,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>5,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>
    </div>
body{
    background: url("img/5.jpg") no-repeat fixed;
    height:2000px;
}
.inner{
    width:700px;
    height:435px;
}

Before scrolling, the effect of the page is as follows:

After scrolling, the effect of the page is as follows:


As can be seen from the above example, no matter how the scroll bar scrolls, the position of the background is always fixed in the upper left corner of the page viewing area without any change. If you want to set a background for the whole web page and want it to change its position as the web page scrolls, you can use this property value.

3). local

This is a new property value in CSS3. The background image is fixed relative to the element content and scrolls with the element content. For an element that can be scrolled (an element set to overflow:scroll / auto), set background attachment: local, and the background will scroll with the scrolling of the content. For example:

<div class="box">
    <div class="inner">
        <p>1,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>2,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>3,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>4,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>

        <p>5,fixed The background image is fixed relative to the form, that is, when the content scrolls, the picture does not move;
            scroll The relative element is fixed, the background image follows the element itself, and the background image does not move when the element content rolls;
            local The relative element content is fixed, and the background image follows the element content.</p>
    </div>
</div>
.box{
   width:700px;
   height:300px;
   border:1px solid #ccc;
   overflow: auto;
   background: url("img/5.jpg") no-repeat local;
}
.inner{
   width:700px;
   height:435px;
}

Before scrolling, the effect of the page is as follows:

After scrolling, the effect of the page is as follows:

It can be seen from the above case that the position of the element background image changes with the rolling of the element content.

4). inherit

The value of the inherit attribute depends on the setting of the background attachment attribute of the parent element.

Summarize the above attribute values:

  • The difference between scroll and local: the scroll background is fixed relative to the element, while the local background is fixed relative to the element content. In other words, when there is an internal scroll bar, scroll is equivalent to fixed, and local is equivalent to scroll.
  • The difference between fixed and scroll: the scroll background is fixed relative to the element, and the element will move with the scroll bar of the page, while the fixed background is fixed relative to the upper left corner of the visible area of the page. No matter how the scroll bar of the page scrolls, the position of the background image will not change. It will only be fixed at a certain position in the page.

5,background-position

Set the properties of the location of the background image. There are three representation methods for this attribute value, namely azimuth representation, percentage representation and pixel representation. Each method corresponds to two values. Let's talk about their values and effects.

1) . azimuth representation

As mentioned above, each method has two values. The two values corresponding to this method are as follows:

positionLocation of background image
top leftRepresents the position of the background image at the top left of the element
top rightRepresents the position of the background image at the top right of the element
top centerRepresents the position where the background image is centered above the element
bottom leftRepresents the position of the background image at the lower left of the element
bottom rightRepresents the position of the background image at the top right of the element
bottom centerRepresents the position where the background image is centered at the bottom of the element
center leftIndicates the position of the background image centered on the left of the element
center rightIndicates the center position of the background image on the right side of the element
center centerIndicates the position of the background image in the vertical center of the element

Here are two examples to illustrate. Set the background at the vertical center of the element, as follows:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat center left;
}

The effect of the web page is as follows:

Set the background at the top left of the element as follows:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat top left;
}

The effect of the web page is as follows:

The values in the azimuth table are not listed one by one. The values in the azimuth table can be selected according to the needs of the project.

Note: if only the first value is specified, the second value will be automatically set to "center".

2) 1. Percentage representation

Two values are expressed as percentages. The first value is the horizontal position and the second value is the vertical position. It is calculated relative to the size of the element. The upper left corner is 0%. The lower right corner is 100%. For example:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 20% 20%;
}

The effect of the web page is as follows:

Note: if only the first value is specified, the second value will be automatically set to 50%.

3) 1. Unit representation

The unit representation here usually uses pixel units to represent two values. The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0. Of course, the unit representation can also use any other CSS units. The background picture can be positioned anywhere in the element, for example:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px;
}

The effect of the web page is as follows:

Here, the background image is positioned 40px to the left and 20px to the top of the element.
Note: if only the first value is specified, the second value will be automatically set to 50%,
And the unit representation can be mixed with the percentage representation.

6,background-size

Sets the size of the background image. There are four representations of this attribute value: unit representation length, percentage representation percentage, attribute value cover and attribute value contain. Let's talk about their values and effects.

1) . unit notation length
This method needs to be represented by two values. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto". For example:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px/100px 100px;
}

The effect of the web page is as follows:

Here, only a background image with a width of 100px and a height of 100px is set for the element. Note the position and size of the background here, which is mentioned in the following precautions.

2) . percentage representation

Setting the width and height of the background image relative to the percentage of the parent element also requires two values. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto". For example:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px/50% 50%;
}

The effect of the web page is as follows:

3). cover

Adjust the background picture in proportion and adaptively spread the whole background area, that is, the background should cover all areas of the element, and there can be no blank. Here, only the attribute value of cover is required. For example:

<div class="box"></div>
.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat top left/cover;
}

Without setting cover, the size of the background image and the effect of the web page are as follows:


When cover is set, the size of the background image covers all the elements. The effect of the web page is as follows:

If the background area is not enough to contain the background picture, the background picture will be cut off, that is, the size of the background picture is larger than the size of the element, and the redundant part of the picture will be cut off, for example:

<div class="box"></div>
.box{
    width:200px;
    height:150px;
    border:1px solid #ccc;
    background: url("img/girl.jpg") no-repeat top left/cover;
}

The effect of the web page is as follows:

Here, the width of the background image is 927px and the height is 1158px, which is much larger than the size of the element. Here, adjust the background image proportionally so that it can adapt to the size of the element and completely cover the element without leaving any blank area. The height of the adjusted background image is still greater than the height of the element, so it is cut off, resulting in the background image not being fully displayed.

4). contain

Adjust the background image in proportion so that the aspect ratio of the background image adapts to the aspect ratio of the background area of the whole element. If the size of the background image is too large and the overall width and height of the element cannot just display the background image, some areas of the element may be blank, for example:

<div class="box"></div>
.box{
    width:200px;
    height:150px;
    border:1px solid #ccc;
    background: url("img/girl.jpg") no-repeat top left/contain;
}

The effect of the web page is as follows:

The size of the background image here is still 927px in width and 1158px in height, which is much larger than the size of the element. Here, adjust the background image in proportion so that it can be completely included in the element. When a size of the adaptive background image is smaller than the corresponding size of the element, there will be a blank space inside the element. Here, the adaptive width of the background image is less than the width of the element, resulting in the blank of the element in the horizontal direction.

7,background-origin

This attribute specifies the areas where the background starts to be drawn, and sets the position where the background starts to be drawn. There are three attribute values: border box, padding box and content box. It is usually used with background clip.

1). border-box

The background starts drawing in the border area, for example:

<div class="box">
   Border area border-box Border area border-box
</div>
.box{
    width:200px;
    height:150px;
    color: #fff;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box;
}

The effect of the web page is as follows:

2) . padding box default

The background starts drawing in the inner margin box area, for example:

<div class="box">
    Inner margin area padding-box Inner margin area padding-box
</div>
.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover padding-box;
}

The effect of the web page is as follows:

3). content-box

The background starts drawing in the content box area. If there is an inner margin, it will not be calculated into the content box area, that is, the content box area does not include the inner margin, for example:

<div class="box">
    Content area content-box Content area content-box
</div>
.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover content-box;
}

The effect of the web page is as follows:

8,background-clip

This attribute indicates that the desired background picture is cropped according to the region. There are three attribute values, namely border box, padding box and content box. Usually used with background origin.

1). border-box

The background starts to be cropped in the border area, but if the background origin is also set to border box, the whole background image will be cropped, and the effect is the same as that of setting the background origin to border box. There is no example here.

2). padding-box

The background starts cropping in the inner margin box area.

When the background origin is set to border box and the background clip is set to padding box, the cropped background picture area is as follows:

<div class="box">
    The background starts cropping in the inner margin box area
</div>
.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box padding-box;
}

Before the background clip is set to padding box, the effect of the web page is as follows:

After setting the background clip to padding box, the effect of the web page is as follows:

It can be seen from the comparison of the two figures that the position of the background picture has not changed, but the picture is cropped from the inner margin box area, that is, only the background picture in the inner margin box area is displayed.

3). content-box

The background starts cropping in the content box area.

When the background origin is set to border box and the background clip is set to content box, the cropped background picture area is as follows:

<div class="box">
    The background starts cropping in the content box area.
</div>
.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box content-box;
}

The effect of the web page is as follows:

The position of the total background image in the above case has not changed, but the image is cropped from the content box area, that is, only the background image in the content box area is displayed.

Precautions for the application of background attribute

1. If both background position and background size attributes are set, the two parameter values should be separated by a left slash /, rather than a space: background position / background size.

2. When the background size is set to cover and contain, both the space attribute value and the round attribute value of the background packet will become invalid. In addition, some Firefox versions do not support space attribute values and round attribute values.

3. The background repeat attribute can provide 2 parameters or 1 parameter. If two parameters are provided, the first one is used in the horizontal direction and the second one is used in the vertical direction; If only 1 parameter is provided, it is used for both horizontal and vertical directions.

4. If background origin and background clip attributes are used at the same time, the value of background origin attribute should be in front of the value of background clip attribute. If the two attribute values are the same, only one value can be set.

5. The suggested sequence is as follows: background color | background image | background repeat | background position / background size | background attachment | background origin | background clip.

6. Multiple backgrounds can be set for elements, and the background attributes are separated by commas. For example:

<div class="box"></div>
.box{
    width:510px;
    height:350px;
    color: #fff;
    border:10px dashed #ccc;
    background: url("img/image.jpg") no-repeat 0px 0px/170px 170px,
                url("img/image.jpg") no-repeat 170px 170px/170px 170px,
                url("img/image.jpg") no-repeat 340px 0/170px 170px
     ;
}

The effect of the web page is as follows:

The above is only personal opinions. If there are deficiencies, please comment below, and share them here first!! 😄 Continue to update later!!

Tags: html5 html css

Posted on Mon, 13 Sep 2021 14:29:53 -0400 by Plakhotnik