CSS3 background-image background Picture related 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.

1	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.

12	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-style> ]*

<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 :

12345

background-repeat:repeat-x; /* 表示水平平铺 */background-repeat:repeat-y; /* 表示垂直平铺 */ background-repeat:repeat-xrepeat-y; /* 水平和垂直平铺(默认) */

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

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

Example :

12345

background-repeat:space; /* 均匀的平铺背景图片，不会被裁剪 */background-repeat:round; /* 水平和垂直平铺背景图片，拉伸图片以尽可能的填充背景，不会被裁剪 */background-repeat:no-repeat; /* 不进行平铺 */

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> [, <attachment> ]*

<attachment> = Scroll | Fixed | Local

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

extension : specifications, MDN data

12345

background-attachment:scroll; /* 跟随滚动条一起滚动。(默认) */background-attachment:fixed; /* 背景图片固定位置，不随着滚动条滚动 */background-attachment:local; /* 跟随内容一起滚动 */

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> [, <bg-size> ]*

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

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

extension : specifications, MDN data

Example :

12345

background-size:100px; /* 背景图片宽度为100px，高度为auto */background-size:100px 50%; /* 背景图片宽度为100px，高度为容器高度的50% */ background-size:100%100%; /* 背景图片宽度为容器宽度的100%，高度为容器高度的100% */

7. Online example

Address: http://www.akmsg.com/WebDemo/CSS3-background-image.html

================================== Series Article ==========================================

This article: 8.2 CSS3 background-image background picture related introduction

Web Development Road Series articles

1.HTML

1.1 HTML page source code layout Introduction

1.2 HTML Base Control Introduction

The difference between 1.3 iframe and frameset

1.4 The difference between name, ID, class

1.5 table, form label introduction, and get and post submission methods

1.6 HTML KBD Keyboard elements

2.CSS Cascading Style Sheets

2.1 CSS selectors and how to refer to each style

Forwarded from:: http://www.cnblogs.com/polk6/

CSS3 background-image background Picture related introduction