CSS - Backgrounds | 1SMARTchicken

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

Background Color

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

				
					div {
    background-color: red;
}

Background Image

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");
}

Setting the Image Size, Repeat, and Position

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;
}

Background Gradient

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)

Linear Gradient

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

Radial Gradient

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

Conic Gradient

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

Background Properties