Here are the background properties:

Background Image

Use background images in web pages for decorative visual effects.

1
2
3
4
5
6

div {
    width: 500px;
    height: 300px;
    
    background-image: url(./img/00.jpg);
}

Background Image Repeat

background-repeat has four values:

Background Position

background-position takes values like horizontal position vertical position. Positions can be keywords or coordinates.

Keywords include left, right, center, top, bottom.

Coordinates use number + px, and can be positive or negative.

1
2
3
4
5

div {
    background-position: center top;
    /* You can also mix numbers and keywords */
    /* background-position: -50px center; */
}

You can specify just one keyword; the other direction will default to center. If you use a single number, it applies to the horizontal direction, with vertical centered.

Background Size

background-size commonly uses three types of values:

• Keywords
  • cover: Scales the background image proportionally to completely cover the background area. Parts of the image might be clipped.
  • contain: Scales the background image proportionally to fit entirely within the background area. Parts of the background might be empty.
• Percentage: Calculates image size based on the box dimensions.
• Number + unit (e.g., px).

When using 100% for percentage, the image width matches the box width, and height scales proportionally.

Background Attachment

background-attachment prevents the background from scrolling with the element’s content. The value is fixed.

Background Shorthand Property

The background property value is background-color background-image background-repeat background-position/background-size background-attachment. Order doesn’t matter.

1
2
3
4
5
6

div {
    width: 500px;
    height: 500px;
    
    background: aqua url(./img/01.jpg) no-repeat center/cover;
}