------of CSS Properties background

---restore content starts---

Today, I took a look at the <css authoritative guide >, recalled the previous few days to see the <css secret >, found background This attribute use frequency is very high, and properties are more, So I decided to take a closer look at this attribute and write today the basic concepts and usages of background.

First, let's look at the abbreviations of which properties background are:

• Background-color
• Background-image
• Background-position
• Background-origin
• Background-clip
• Background-repeat
• Background-size
• Background-attachment

Yes, it's a 8-attribute abbreviation, below, one to look at these properties.

1.background-color

This property is the specified element background color.

1 Body {2     background: #ccc;/* Specifies that the body background is #ccc */3}

This attribute is used when the note points:

1. When mixing with other attributes, place the last face as a fallback attribute

2.background-image

This property is used to insert a background image into an element, especially to note that,<gradient> produces a picture, not background-color

Usage definition:

1 Background-image:
<image>: [<url> | <linear-gradient> | <radial-gradient>]

The HTML code is as follows:

<id= "box"></div>

CSS code:

#box {
Display:block;
width:200px;
height:200px;
BORDER:1PX solid black;
Background-image:url ("Background/boats.png"); /* Use URL here */
}

The effect is as follows:

Note the point:

1. Background-image can insert multiple pictures at the same time, use "," (comma) to separate, and then use Background-position to determine the position of each picture within the element
2. Use Background-color when the last write Background-color, prevent the picture unexpectedly not loaded, use Background-color as fallback

　　

1{
Background-image:url ("1.jpg"), url ("2.jpg"), url ("3.jpg");
Background-position:top left, center center, bottom 10px right 10px; /* Following introduction */
Background-repeat:no-repeat;
Background-color:blue; /* as fallback */
}

3.background-position

The values you can use are:

1. Use keyword <keywords>: Top, right, bottom, left, center
2. Use percent <percentage>, such as 30%,50%
3. Use <values>, such as 4em 30px ...

Note the point:

• • Initial value 0% 0%, which is the top left position of the element
  • When there is only one value, such as Background-position:top; Another value defaults to center (or 50%), which is background-position:center top;
  • Mix keywords, percentages, values you should write the horizontal values first, and then write the values in the vertical direction

    #box {
    Background-position:right 10px; /* Indicates on the right (horizontal), from the upper boundary of the element 10px (vertical direction) */
    　　

    background-position:10px right;/* error notation is ignored for this property */

    
    }

  • When using keywords representation, writing is more free

    {
    Background-position:top left; /* No need to consider writing horizontal or vertical values first */
    Background-position:top 30px right 30%; /* Can even use multiple values to represent but cannot use center as reference */}

  • This value is relative to the area set by the Background-origin

4. Background-origin

This property is the initial position of the specified background image, with a total of 3 values

• Border-box
• Padding-box (default value)
• Content-box

Note the difference from Background-clip.

5.background-clip

This property specifies that the picture can be drawn, and there are 3 values

• Border-box (default value)
• Padding-box
• Content-box

{

Display:block;
width:400px;
height:400px;
padding:50px;
Background-image:url (background/boats.png);
Background-repeat:no-repeat;
Background-origin:padding-box;
-webkit-background-clip:content-box; /* Clip area is smaller than origin of the picture */
-moz-background-clip:content-box;
Background-clip:content-box;
Background-color:yellow;

BORDER:1PX solid black;

}

　　

You can see that the picture is only partially displayed because the drawing area is Content-box (Background-clip), and the starting position of the picture to appear is in Padding-box (Background-origin)

6.background-repeat

This value can be easily understood at a glance, and is defined as whether it is copied, and has the following values:

• Repeat x, y axes are copied
• Repeat-x
• Repeat-y
• Space this value indicates how many times a picture on a given axis (axis) can be duplicated, automatically giving a regular spacing, and the x, y direction spacing can be different, overwriting the Background-position property
• Round this value indicates that when the background picture is copied, the picture is automatically zoomed out or enlarged, which cannot overwrite the Background-position property

Example:

    {        display: block;         width: 400px;         height: 400px;         padding: 50px;         background-image: url (background/boats.png);         background-repeat: space,/* round */        background-color: Yellow ;         Border: 1px solid black;    }

1.space

2.round

7.background-size

This attribute is more interesting and more important

Defined:
<background-size>: [<length> | <percentage> | auto]{1,2} | Cover | Contain

Note the point:

2. The initial value (that is, the default value) is Auto
4. The percentage <percentage> value is sized for the Background-origin area, not the Background-clip area

   Explain this article:
   such as Background-origin:padding-box, Background-clip:border-box;
   background-size:25% 50%;
   Said:
     The width of the image is 25% of the value of the element Padding-box, and the height is 50% of Padding-box
   

6. When you write only an auto value, it indicates that both the horizontal and vertical directions are auto
8. Auto and <length> Mix when writing, such as Background-size:auto 30px;

   Assuming that the image intrinsic property width is 200px * 100px (aspect ratio is 2:1)
   There are several situations
   1.auto value calculated as 30px*2 = 60px
   2.auto value calculation fails auto automatically changes to picture default width value: 200px
   3.1th, 2 steps failed, auto = 100%, this situation vector diagram appears more, such as svg,<gradient> picture
   

10. Cover is the overlay fills the entire drawing area

    #box {
    

    Display:block;
    width:400px;
    height:400px;
    Background-image:url (background/boats.png);

    Background-size:cover;

    Background-color:yellow;
    BORDER:1PX solid black;

    }
    

12. Contain the entire picture by automatically shrinking or zooming in

    #box {

    Display:block;
    width:40px;
    height:40px;
    Background-image:url (background/boats.png);
    Background-repeat:no-repeat;
    Background-size:contain;

    Background-color:yellow;
    BORDER:1PX solid black;

    }

8.background-attachment

This value is relatively simple, that is, when the scroll bar exists, is fixed, or with a scroll, two property values:

• Scroll (default value)
• Fixed

　　

Background Comprehensive Properties

Note the point:

1. All background sub-attributes are not inherited
2. When writing synthetic properties, Background-position is written in front of Background-size and separated by "/"

   {
   Background:url (1.jpg) repeat-y top left/50% 50% fixed padding-box border-box yellow;
   }
   
   
   #box {
   Background-image:url (1.jpg);
   Background-repeat:repeat-y;
   Background-position:top left;
   background-size:50% 50%;
   background-attachment:fixed;
   Background-origin:padding-box;
   Background-clip:border-box;
   Background-color:yellow;
   }

3. The Background-origin property is to be written in front of the Background-clip property, such as 2

Finally send a picture, next time together learn linear-gradient and radial-gradient

---restore content ends---

------of CSS Properties background