About CSS3 background-image background picture Introduction

This will show you how to set the background image with Background-image, as well as the tile, stretch, offset, and size of the background image.

1. Background Image Style classification

The properties that set the element background picture and its background picture style in CSS are mainly the following:

Background-image: Sets the background picture of the element.

Background-repeat: Sets how the background picture is tiled.

Background-attachment: Sets whether the background picture is fixed or moves with scrolling.

Background-position: Sets the position of the background picture.

Background-size: Sets the size of the background picture.

The properties are described in detail below.

2. Background-image: Set the background image of the element

Description : You can set 1 or more background pictures of an element.

Grammar :<bg-image> [, <bg-image>]* | None

default value : None. Does not set the background picture of the element.

extension : specifications, MDN data

2.1 Setting a single background picture

Description : The background picture is tiled horizontally and vertically by default.

Background-image:url (' res/bga.jpg ')

2.2 Setting multiple background images

description : When rendering the background picture in front of the upper layer, behind the background picture on the lower level.

Background-image:url (' res/bga.jpg '), url (' res/bgb.jpg '); background-repeat:no-repeat;

3. Background-repeat: Set the tile effect of the background picture

Description : Sets the tile effect of the background picture, including horizontal, vertical.

syntax : [,]*

<repeat-style>= Repeat-x | repeat-y | [Repeat | space | round | no-repeat] {A}

Default value : Repeat//horizontal and vertical tiling

extension : specifications, MDN data

3.1 Background-repeat:repeat-x | repeat-y | Repeat-x | Repeat-y

Description : Sets the background image horizontally and vertically.

Example :

Background-repeat:repeat-x; /* indicates horizontal tile */background-repeat:repeat-y; /* Indicates vertical tiling */background-repeat:repeat-x repeat-y; /* Horizontal and vertical tiling (default) */

3.2 Background-repeat:space | Round | No-repeat

Description : Sets the other tiling effect of the background picture.

Example :

Background-repeat:space; /* Evenly tiled background image, will not be cropped */background-repeat:round; /* Tile background picture horizontally and vertically, stretch the picture to fill the background as much as possible, and not be cropped */background-repeat:no-repeat; /* Do not tile */

4. Background-attachment: Sets whether the background picture is fixed or moves with scrolling

Description : Sets whether the background picture is fixed or moves with scrolling.

syntax : [,]*

<attachment>= Scroll | Fixed | Local

Default value : Scroll//Background picture follow scroll bar always scroll

extension : specifications, MDN data

Background-attachment:scroll; /* Scroll along with the scroll bar. (default) */background-attachment:fixed; /* Background picture fixed position, not with scroll bar scrolling */background-attachment:local; /* Scroll along with content */

4.1 Background-attachment:scroll; Follow the scroll bar until you scroll. Default

4.2 background-attachment:local; Scroll along with content

5. Background-position: Set the location of the background picture

Description : Set the position of the background picture to set the 4 corner horizontal and vertical starting position of the background picture.

Grammar :<position> [, <position>]*

default value : 0% 0%//The upper left corner of the background image is positioned in the upper left corner of the container

extension : specifications, MDN data

5.1 background-position:10px; Background image horizontal to left edge 10px, vertical center

5.2 background-position:10px 20px; Background image horizontal and left edge is 0px apart, perpendicular to the top edge of 20px

5.3 Background-position:left 10px Bottom 20px; Background image horizontal and left edge 10px apart, perpendicular to the bottom edge of 20px

6. Background-size: Set the size of the background picture

Description : Sets the size of the background picture.

syntax : [,]*

<bg-size>= [<length>|<percentage>| Auto]{1,2} | Cover | Contain

Default value : Original size of auto Auto//Background picture

extension : specifications, MDN data

Example :

background-size:100px; /* Background image width is 100px, height is auto */background-size:100px 50%; /* Background image width is 100px, height is container height of 50% */background-size:100% 100%; /* Background image width is 100% of container width, height is 100% of container height */