Detailed CSS background background properties

The background (background) is an important part of CSS and one of the basics of CSS, and now it's time to review the 3 properties and 2 new features in the 5 properties and CSS3 in Css2.

Css2_ background (background) prequel

Family members

The background (background) family consists of 5 main background attributes in Css2, namely:

background-color specifies the background color of the fill
background-image Quote image as background image
background-position specifies the position of the background image of the element
background-repeat Determines whether the background image is tiled
background-attachment 是否 Whether the background image scrolls

Want to know the details of the five members of the family, for details, hurriedly find a place to sit down, quietly listen to my blow!

Background-color background Color

The member can only fill the background with a solid color.

Background-color:colorname;

The value of colorName:
(1) Color name: red, green, blue, skyblue ...
(2) rgb (): rgb (255,255,255), rgb (12,202,29) ...
(3) hex color values: # 000000, #ffffff, # ff6600 ...
Special value (default):
(4) transparent: transparent; // transparent background

Background-image Background Map

This member allows you to specify a picture as the background.

Background-image:url (ImagePath);     ImagePath refers to the picture path (relative path and absolute path)

Best practices: Combined with (Background-color), you can guarantee that a background color can be filled in the following situations:

a> The picture cannot come out (the path may be wrong, the picture does not exist);
B> the picture was deleted by mistake;
C> The picture cannot cover the whole box without being tiled;

Background-repeat Background Tile

When you set a background picture, the member defaults to tiling the picture horizontally and vertically to fill the entire box.

Background-repeat:propertyvalue;   PropertyValue refers to attribute values

The value of propertyValue:
(1) repeat: (default) tile
(2) no-repaet: not tiled
(3) repeat-x: Tile horizontally
(4) repeat-y: tile vertically

Background-position background positioning

This member controls the position of the background image in the box, i.e. the upper-left corner of the background image relative to the upper-left corner of the box.

Background-position:x-coordinate y-coordinate;        (Vertical coordinate of horizontal direction coordinates)

Value of the attribute:
(1) Percentage: 10% ……
(2) Pixel value: 10px ...
(3) Bearing noun:
Horizontal direction: left right center
Vertical direction: top bottom center

The default value is three ways of expression:

 background-position: left top ;
   background-position: 0px 0px ;
   background-position: 0% 0% ;

Special Note:

Background positioning when using percentages, the browser sets the position of the picture as a percentage of the box size, illustrating:

background-position: 40% 50%;
40% refers to: the position of the background image in the horizontal direction 40%, corresponding to the horizontal position of the box 40%
50% means: The background image is at 50% of the vertical direction, which corresponds to the vertical position of the box.

Background-attachment Background Attachment

This member determines whether the background image is fixed or scrolls along with the rest of the page.

Background-attachment:status     //Background attachment status

Values of status:
(1) scroll: scroll (default), the background image will scroll as the rest of the page scrolls
(2) fixed: fixed, when the rest of the page is scrolled, the background image will not scroll
(3) inherit: inherit the setting of the background-attachment property from the parent element (rarely used)

css3_ background (background) post-biography

CSS3 not only added 3 members to the background family, but also expanded 2 important functions for the background family.

Knowledge Point Station:

CSS3 's leader is not a web, but a WHATWG organization made up of major browser vendors, which was later adopted by the Internet. Therefore, the new attributes of CSS3 are different in the writing before and after the adoption.

Before being accepted by the Internet, if the browser wants to support this property, it needs to add the browser's private prefix (the kernel used by the browser) to indicate that it is a private property of the browser, not the official property of the Web. So, in real work, you have to write this (take Background-origin for example):

-webkit-background-origin:;
-moz-background-origin:;
-ms-background-origin:;
-o-background-origin:; // Add the browser's private prefix
background-origin:; // W3C writing, must bring 

(i) New members of the family

First look at the background of the new members of the family, very handsome very beautiful very mysterious:

background-origin
background-size background size
background-clip background crop

Next, the old driver driving time, please sit and grab the handrail!!

Background-origin Background origins

This member determines the location of the background map relative to which part of the box is usually used in conjunction with the background-position.

By default, the background map is positioned relative to the inner margin of the box (padding)! However, in CSS3, the spec background can also be positioned relative to the box's border (border) and content.

-webkit-background-origin: positionArea; // positionArea specifies the bit area
-moz-background-origin: positionArea;
-ms-background-origin: positionArea;
-o-background-origin: positionArea;
background-origin: positionArea;
The value of positionArea:
(1) padding-box: the background image is positioned relative to the padding of the box (default)
(2) border-box: positioning the background image relative to the border of the box
(3) content-box: the background image is positioned relative to the content of the box

Special Note:

A> the member began to support from IE9;
B> the box model in CSS: Content + padding (inner margin) + border (border) + margin (margin);

Background-size Background size

The member determines the size of the background map, but does not change the original size of the picture itself.

-webkit-background-size: widthSize heightSize; // (width size height size)
-moz-background-size: widthSize heightSize;
-ms-background-size: widthSize heightSize;
-o-background-size: widthSize heightSize;
background-size: widthSize heightSize;

Value of the property:

(1) Default value: Auto

Background-size:auto Auto; The background map is rendered in its own size

(2) pixel value: px ...

background-size:50px 50px; The background map is rendered with the specified value

(3) Percentage: 100% ...

background-size:50% 50%; The background image is rendered as a percentage of the size of the box

(4) Cover

Background-size:cover; Zoom the background to just cover the box

(5) contain

Background-size:contain; Zoom the background map to the width or height of the box, if the full background map is guaranteed to be displayed

Best Practices:
Picture private features: As long as you set the picture width High school Any one value, the picture will be equal to the scale, this can ensure that the picture does not distort without losing true;
Therefore, usually take advantage of the image of this feature, in the case of not knowing the size of the picture, such as scale scale, background-size only to the picture width High School of any one of the settings, and the other one set to auto.

Background-clip Background Cutting

This member specifies the drawing area of the background (background map or background color).

-webkit-background-clip: clipArea; // clipArea refers to the drawing area
-moz-background-clip: clipArea;
-ms-background-clip: clipArea;
-o-background-clip: clipArea;
background-clip: clipArea;
ClipArea values:
(1) border-box: The background is cropped from the box border (default)
(2) padding-box: background is cropped from the box margins
3 (3) content-box: background is cropped from the box content

(ii) extended family functions

Look at all the two features that CSS3 has extended to the background family!

a> multiple background images b> background gradient

Feel tall on the look, in the end is what mysterious function, hurriedly come together analysis and analysis!

Multiple background graphs

CSS3 allows one element box to apply one or more pictures as a background, and multiple backgrounds are separated by commas "," and the pictures are displayed in the Order of writing!

Background:url (./images/01.png), url (./images/02.png), url (./images/03.png);

Special Note:

A> from IE9 support;
B> does not need to add the browser private prefix;
c> if Content-box, Padding-box and Border-box set together, you need to write Content-box in the front, Padding-box write in the second, Border-box written in the last;

Background:url (./images/01.png) Content-box, url (./images/02.png) Padding-box, url (./images/03.png) Border-box;

Note: Here Content-box, Padding-box and Border-box are both Background-clip attribute values and Background-origin attribute values;

Background gradient

In CSS3, you can set a background color gradient for an element box, rather than simply setting a solid color as the background color of the box or specifying the picture as the background of the box! Remember that the background gradient here is the background color! Background color! Not a background map!!

(1) Linear gradient

Also known as a linear gradient.

background-image: -webkit-linear-gradient (startLocal, color1, color2, color3);
background-image: -moz-linear-gradient (startLocal, color1, color2, color3);
background-image: -ms-linear-gradient (startLocal, color1, color2, color3);
background-image: -o-linear-gradient (startLocal, color1, color2, color3); // Add the browser's private prefix
background-image: linear-gradient (startLocal, color1, color2, color3); // W3C notation

Color1 represents a color value:

(1) If you do not add a percentage or pixel value: a> color1 will be displayed at the starting position, B> Color3 will be displayed at the last position, C> Color2 will be displayed in the middle, (2) If you add a percentage or pixel value, the color will be in the box The position of the child is displayed;

Startlocal represents the starting position, which is the desired value:

(1) Position noun:

top: gradient from top to bottom (default) (equivalent to to bottom)
left: gradient from left to right (equivalent to to right)
right: gradient from right to left (equivalent to to left)
bottom: gradient from bottom to top (equivalent to to top)
top left: start the gradient from the top left corner

(2) degree degree:

In the background gradient, the standard of the WHATWG is different: the axis is different, the starting position differs, the direction of rotation varies. Therefore, the degree is not the same! Specific:

In the a>, 0deg is on the left side of the x-axis (horizontal direction) and rotates clockwise;
In B> WHATWG, 0deg is rotated counterclockwise under the y-axis (vertical direction);

background-image: -webkit-linear-gradient (270deg, red, blue);
background-image: -moz-linear-gradient (270deg, red, blue);
background-image: -ms-linear-gradient (270deg, red, blue);
background-image: -o-linear-gradient (270deg, red, blue);
background-image: linear-gradient (180deg, red, blue); / * deg means degree degrees * /

In particular, it does not support the notation of positional nouns, but supports the writing of degrees.

(2) Radial gradient

Also known as the center gradient

background-image: -webkit-radial-gradient (start_X start_Y, color1, color2, color3);
background-image: -moz-radial-gradient (start_X start_Y, color1, color2, color3);
background-image: -ms-radial-gradient (start_X start_Y, color1, color2, color3);
background-image: -o-radial-gradient (start_X start_Y, color1, color2, color3); // Add the browser's private prefix
background-image: radial-gradient (start_X start_Y, color1, color2, color3); // W3C notation

Description: The value of the starting position of the radial gradient does not support the notation of degrees!

Background (background) sequelae

(i) background (background) complex

In CSS, you can set all the background properties (including CSS3 new properties) in a declaration with the background composite property, instead of writing a background property individually, you can set the Background property:

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

is not feeling very good, but here a few pits, deserves our attention!

(1) commonly referred to as the background composite property, is for CSS2 in the 5 background attributes, does not include CSS3 in the new 3 background properties!

Background:background-image background-repeat background-position background-attachment background-color;

A> does not exist in the strict sense of the writing order (above is the old driver's writing order);

B> If a property is not written, the default value is automatically applied;

So background composite properties, why not include the 3 properties in CSS3? The reasons are:

a> The background attribute in css2 has been supported by major browsers, there is no compatibility, no need to write the browser private prefix!

b> Added background attribute in css3, there is a certain compatibility, and you need to bring the private prefix of major browsers to be supported!

(2) Remember CSS3 to the background of the family to add a number of new background map function, the function is also to start with background!

So here's the problem!

What if we want to use the background compound attribute to abbreviate the background property of CSS2 and add multiple background graphs in an element?

a> Priority to add multiple background images with the background composite property;

b> The background property can only be written separately, not the shorthand for the background composite property!

c> The background attribute written separately must be written after the background composite attribute! 

There must be another classmate to ask, why does the individual background attribute have to be written after the background compound attribute?

CSS three major features of the Cascade sex! Superseding, before the waves died on the beach!

(ii) about the Background-image attribute

This family member is very good, of course also more complex!

(1) Background composite properties that can cover multiple background graphs!

In the same element:

Causes multiple background map effects to be invalidated

p{width:300px;  height:300px;   Background:url (images/30/ab.png) content-box,url (images/30/xiaoming.jpg) Padding-box; Background-image:url (images/30/ab.png);}

In a nested parent-child element:

a> if the size of the child element's background is smaller than the size of the parent element, then the extra parts of the parent element's multiple background map effects are displayed!
b> if the background of a child element is greater than or equal to the size of the parent element, then the parent element's multiple background image effects are overwritten!

p{width:300px;  height:300px; Background:url (images/30/ab.png) content-box,url (images/30/xiaoming.jpg) Padding-box;}  P span{Display:block;  width:300px;  height:300px; Background-image:url (images/02.jpg);}

(2) Background gradient and background map share the Background-image Property!

A> in the same element, the two cannot coexist, who is in front, who first dies;
B> in a nested parent-child element, the style of the child element overrides only the style of the parent element;

(iii) The difference between the inserted picture and the background map

(1) Insert image placeholder; Background map does not occupy a position

(2) Insert the image of high semantics, can be indexed by the search engine, background map is low in semantics, can not be searched by the search engine

(3) Inserting the picture is not easy to locate; The background map is easy to locate because of the Background-position property

(4) The image can not be inserted into the sprite diagram, background map can be used in the sprite map

(5) Insert picture has a bug, below with a gap

(iv) Best practices

(1) in the same element, the background compound attribute is written in front, the background property that needs to be set separately is written at the back;
Reason: The Yangtze River before the wave, before the wave died on the beach

(2) Multiple background graphs are added to the same element, and other background attributes can only be written separately, not in the compound attribute shorthand;

(3) in nested parent-child elements, write property with the same name is not recommended
Reason: When the child element size is greater than or equal to the parent element size, the style of the parent element is overwritten by the quilt element;

(4) in the actual work, multi-use background map, less use of inserting pictures;