1. Background color

1.1. Grammar:

Background-color: color value; The default value is transparentCopy the code

2. Background image

2.1. Grammar:

background-image : none | url (url) 
Copy the code
parameter role
none No background (default)
url Specify the background image using an absolute or relative address 
background-image : url(images/demo.png);
Copy the code
  • Tip: We recommend that the address behind the background image, not the URL, be quoted.

3. Background tile (repeat)

3.1. Grammar:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 
Copy the code
parameter role
repeat Background image tiled vertically and horizontally (default)
no-repeat Background image not tiled
repeat-x The background image is tiled horizontally
repeat-y The background image is tiled lengthwise

4. Position

4.1. Grammar:

background-position : length || length

background-position : position || position 
Copy the code
parameter value
length Percentage of | consisting of floating point Numbers and the unit identifier length value
position Top | center | | bottom left | center | right orientation noun

4.2. Note:

  • Background-image must be specified first
  • Position is followed by the x and y coordinates. You can use azimuth nouns or exact units.
  • If you specify two values, both of which are azimuth names, the order of the two values is irrelevant. For example, left top and top left are the same
  • If only one orientation noun is specified, the other value is centered by default.
  • If position is followed by the exact coordinates, then the first one must be x and the second one must be y
  • If only one value is specified, that value must be the x coordinate, and the other is vertically centered by default
  • If the specified two values are a mixture of the exact unit and the bearing name, the first value is the x coordinate and the second value is the y coordinate

In practice, the most used background image is centered.

5. Background attachment

  • Background attachment explains whether the background is scrolling or fixed

5.1. Grammar:

background-attachment : scroll | fixed 
Copy the code
parameter role
scroll The background image is scrolling with the object content
fixed Background image fixation

6. Background shorthand

  • Background: The order in which values of attributes are written is not officially mandatory. For readability, the following is recommended:
  • Background color background image address background tile background scroll background position;

6.1. Grammar:

background: transparent url(image.jpg) repeat-y  scroll center top ;
Copy the code

7. Transparent background (CSS3)

7.1. Grammar:

Background: Rgba (0, 0, 0, 0.3);Copy the code
  • The last parameter is alpha transparency and the value ranges from 0 to 1
  • Background: rgba(0, 0, 0,.3);
  • Note: background translucency refers to the box background translucency, the contents of the box is not affected
  • Since it is CSS3, versions lower than IE9 are not supported.

8. Background summary

attribute role value
background-color The background color Predefined color values/hexadecimal /RGB codes
background-image The background image Url (Image path)
background-repeat Whether the tile repeat/no-repeat/repeat-x/repeat-y
background-position Background position Length /position are x and y coordinates, respectively. Remember that if you have an exact numeric unit, you must write x and y first
background-attachment Background fixed or scrolling scroll/fixed
Background shorthand More simple Background color Background picture address background tiled background Scroll background position; They have no order
The background transparent Make the box translucent Background: rgba (0,0,0,0.3); It must be followed by four values