The CSS background properties are used to add backgrounds and background effects to the HTML page and HTML elements.

The background-color property sets the background color of the entirety of an element.

div {
    background-color: red;
}

The background-image property sets one or more background images (with varying placement) for an element. The default placement is at the top-left corner.

div {
    background-image: url("my-background.jpg");
}

The background-size property specifies the size of the background image. By default an image that doesn’t fill the element will repeat both vertically and horizontally starting from the top, left position. This can be changed.

div {
    background-image: url("my-background.jpg");
    background-size: 400px 200px;
    background-repeat: no-repeat;
    background-positon: right center;
}

CSS lets you create smooth gradients between two or more specified colors.

• Linear Gradients (down/up/left/right/diagonally)
• Radial Gradients (radiating circular from their center)
• Conic Gradients (rotated around a center point)

div {
    height: 100px;
    background-color: red; /* default for browsers that don't support gradients */
    background-image: linear-gradient(to right, red , blue);
}

div {
    height: 100px;
    background-color: red; /* default for browsers that don't support gradients */
    background-image: radial-gradient(red, blue, green);
}

div {
    height: 100px;
    background-color: red; /* default for browsers that don't support gradients */
    background-image: conic-gradient(red, yellow, blue, green);
}

• CSS – background Property
  The background property is a shorthand property for all the other properties a CSS background can be given.
• CSS – background-attachment Property
  The background-attachment property determines whether the background image scrolls with the rest of the page or is fixed in place as the page scrolls.
• CSS – background-blend-mode Property
  The background-blend-mode property defines the blending mode of each background color and/or image layer.
• CSS – background-clip Property
  The background-clip property defines how far the background color or image should extend within an element.
• CSS – background-color Property
  The background-color property sets the background color of the entirety of an element including padding and border, but not margin.
• CSS – background-image Property
  The background-image property sets one or more background images (with varying placement) for an element. The default placement is at the top-left corner.
• CSS – background-origin Property
  The background-origin property specifies the positioning area of a background image (this property has no effect if the background-attachment is fixed).
• CSS – background-position Property
  The background-position property sets the starting position of a background image, which by default is the top-left corner of an element. Unless otherwise specified, the image will repeat both vertically and horizontally to fill the element.
• CSS – background-repeat Property
  The background-repeat property sets how a background image will be repeated if at all. By default, the background image is repeated both vertically and horizontally.
• CSS – background-size Property
  The background-size property specifies the size of the background image.