Background properties in the CSS include background-color, background-position, background-size, background-repeat, background-origin, and background-clip.

A directory of CSS background applications and background properties

    • Basic attributes
    • Background image (image)
    • Background tile (repeat)
    • Background position
    • The background to
    • Background shorthand
    • Background Transparency (CSS3)
    • Background map orientation case

Basic attributes

CSS can add background colors and background images, as well as image Settings.

background-color The background color
background-image Background image address
background-repeat Whether the tile
background-position Background position
background-attachment Background fixed or scrolling
Composition of backgrounds (compound attributes)
Background color Background image address Background tiled background Scroll background position

Background image (image)

Grammar:

Background - image: none | url (address). 1.Copy the code

Parameters:

None: No background image (default) URL: Specifies the background image using an absolute or relative address

The background-image property allows you to specify an image to be displayed in a background (CSS3 only allows multi-background) that can be used with background-color. If the image is not repeated, the image will not cover the area will be filled with background color. If a background image is tiled, the background color is overlaid.

Tip: We encourage the address after the background image, without quotation marks.

Background tile (repeat)

Grammar:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

1.
Copy the code

Parameters:

Repeat: Background image tiled vertically and horizontally (default tiling)

No-repeat: Background image is not tiled

Repeat -x: The background image is tiled horizontally

Repeat – Y: Background image is tiled vertically

When setting up a background image, the default is to tile the image horizontally and vertically to cover the entire element.

Background position

Grammar:

Background - position: length | | length background - position: the position | | position 1.2.3.Copy the code

Parameters:

Length: the percentage of | consisting of floating point Numbers and the unit identifier length value. Please refer to the length unit position: top | center | | bottom left | center | right

Description:

Sets or retrieves the background image position of an object. Background-image must be specified first. The default value is :(0% 0%). If only one value is specified, it will be used for the abscissa. The ordinate will default to 50%. The second value will be used for the ordinate.

Note:

  1. Position is followed by the x and y coordinates. You can use azimuth nouns or exact units.
  2. If used in combination with the exact unit and azimuth name, the x-coordinate must be first and the y-coordinate followed. Background-position: 15px top; So 15px must be the x coordinate and top is the y coordinate.

But the thing that works the most is that the background image is centered.

The background to

Grammar:

background-attachment : scroll | fixed 

1.
Copy the code

Parameters:

Scroll: The background image is rolled along with the object content. Fixed: The background image is fixed

Description:

Sets or retrieves whether the background image scrolls with the object content or is fixed.

Background shorthand

The order in which background values are written is not mandatory. For readability, the following is recommended:

Background color Background image address Background tiled background Scroll background position

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

1.
Copy the code

Background Transparency (CSS3)

CSS3 supports background translucent writing syntax format is:

Background: rgba (0,0,0,0.3); 1.Copy the code

The last parameter is alpha transparency and the value ranges from 0 to 1

Note: background translucency refers to the box background translucency, the contents of the box does not affect.

Background map orientation case

Note:

  1. Positon can be followed by a azimuth noun and there can be no order between them
  2. Position If you write only one position noun, the other one defaults to the middle
  3. Position can also be followed by the value px but the x must come first and the y must not be reversed