Detailed Explanation of Background Properties in CSS

Description
The CSS background property is used to set the background effects of an element, including background color, background image, background positioning, etc. It is actually a shorthand property that encompasses multiple sub-properties. Mastering the details of these sub-properties allows for complex background effects.

1. Composition of Background Properties
The background property includes the following sub-properties:

• background-color: Background color
• background-image: Background image
• background-repeat: Background repeat behavior
• background-position: Background position
• background-size: Background size
• background-attachment: Background attachment (scrolling behavior)
• background-origin: Background positioning area
• background-clip: Background painting area

2. Detailed Explanation of Each Sub-Property

2.1 background-color

• Sets a solid color background.
• Values: Color values (e.g., #fff, rgb(0,0,0)), transparent.
• By default, it covers the entire element (including padding and border areas, specifically influenced by background-clip).

2.2 background-image

• Sets one or more background images. Multiple images can be set simultaneously (separated by commas).
• Values: url('image-path'), gradient functions (e.g., linear-gradient()), none.
• Example: background-image: url('bg.jpg'), linear-gradient(red, blue);

2.3 background-repeat

• Controls how the background image repeats.
• Values:
  • repeat: Default, repeats both horizontally and vertically.
  • repeat-x: Repeats only horizontally.
  • repeat-y: Repeats only vertically.
  • no-repeat: Does not repeat.
  • space: Spaces out images evenly (without clipping).
  • round: Scales images to fit the container.

2.4 background-position

• Sets the starting position of the background image.
• Values: Keywords (left/center/right top/center/bottom), length values, percentages.
• Two values can be specified (horizontal vertical), e.g., center top or 50% 20px.

2.5 background-size

• Sets the size of the background image.
• Values:
  • auto: Maintains original dimensions.
  • cover: Scales to cover the entire container (may crop the image).
  • contain: Scales to be fully visible within the container (may leave empty space).
  • Specific dimensions: e.g., 100px 50px.

2.6 background-attachment

• Controls whether the background image scrolls with the page.
• Values:
  • scroll: Default, scrolls with the element's content.
  • fixed: Fixed relative to the viewport.
  • local: Scrolls with the element's content.

2.7 background-origin

• Sets the reference area for background positioning.
• Values:
  • padding-box: Relative to the padding box (default).
  • border-box: Relative to the border box.
  • content-box: Relative to the content box.

2.8 background-clip

• Sets the area to which the background is painted.
• Values:
  • border-box: Painted to the border box (default).
  • padding-box: Painted to the padding box.
  • content-box: Painted only to the content box.
  • text: Clips the background to the text's foreground (requires -webkit- prefix).

3. Shorthand Syntax

• Full syntax: background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];
• Note: Use / to separate position and size.
• Example: background: #fff url('bg.jpg') no-repeat fixed center/cover content-box;

4. Practical Application Tips

4.1 Multiple Background Images

.element {
  background: 
    url('bg1.png') left top no-repeat,
    url('bg2.png') right bottom no-repeat,
    linear-gradient(blue, pink);
}

4.2 Background Gradient with Texture

.element {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('texture.jpg');
}

4.3 Parallax Background Effect

.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

5. Notes

• When using multiple background images, the first one listed appears on top.
• background-size must follow position and be separated by /.
• Some properties (e.g., background-clip: text) require browser prefixes.
• Performance consideration: Avoid using excessively large background images.