This takes the value from its parent element.

This makes the background cover the entire container, including the border.

This makes the background extend only up to where the border starts.

This works like border-box, but it will take into consideration any padding, thus creating a gap between the border and the background.

CSS:

.element {
  background-clip: border-box;
}

Here is a demo in CodePen: http://tiny.cc/background-clip

Its syntax is linear-gradient. These gradients can go vertical, horizontal, or diagonal.

Its syntax is radial-gradient. These gradients are circular in nature, and by default, they will adapt to an element's dimension. For example, if the element is a perfect square, it would make a perfect circular radial gradient. However, if the element is a rectangle, then the radial gradient would look like an oval.

We can add as many colors in a gradient as we want or need to. Unless it is strictly necessary, I recommend that you steer away from doing so, as it can have a negative impact on browser performance.

Additionally, in order to give us more control over the gradients, we can define where a gradient color stops so that the following one can start. This is called color stops. Color stops can be defined in pixels or percentages. Percentages are more commonly used because of their relative nature, which helps maintain the integrity and proportions of the gradients.

CSS:

/*Graphic file*/
.element {
  background-image: url(../images/bg-texture.jpg);
}
/*Multiple images*/
.element {
  background-image:
    url(../images/bg-icon.svg),
    url(../images/bg-texture.jpg);
}
/*Linear gradient*/
.element {
  background-image: linear-gradient(red, orange);
}
/*Linear Gradient with color stops*/
.element {
  background-image: linear-gradient(red 40px, orange 25%, green);
}
/*Radial gradient*/
.element {
  background-image: radial-gradient(red, orange);
}
/*Radial gradient with color stops*/
.element {
  background-image: radial-gradient(red 40px, orange 25%, green);
}

We can use three different types of values: predefined keywords, percentage, and length.

Values such as left, right, top, and bottom are the predefined keywords.

Values such as 5% and 80%.

Values such as 15px 130px.

This property requires you to declare two values: the first value relates to the x axis (horizontal) and the second value to the y axis (vertical).

The default value is 0 0; which is exactly the same as left top.

CSS:

/*Default values*/
.element {
  background-position: 0 0;
}
/*Keyword values*/
.element {
  background-position: right bottom;
}
/*Percentages values*/
.element {
  background-position: 5% 80%;
}
/*Length values*/
.element {
  background-position: 15px 130px;
}

Here is a demo in CodePen: http://tiny.cc/background-position

This property only works if background-image has been declared.

There are four values: repeat, repeat-x, repeat-y, and no-repeat.

CSS:

/*Default value*/
.repeat { background-repeat: repeat; }
/*Repeat horizontally*/
.repeat-x { background-repeat: repeat-x; }
/*Repeat vertically*/
.repeat-y { background-repeat: repeat-y; }
/*No repeat*/
.no-repeat { background-repeat: no-repeat; }

Here is a demo in CodePen: http://tiny.cc/background-repeat

There are five values: a length value, a percentage value, auto, contain, and cover.

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

This is when we use percentages such as 50%, 85%, and so on.

This value scales the image in the corresponding direction (horizontal or vertical) in order to maintain its aspect ratio and not deform it.

This value makes sure the image can be seen completely within its parent container. The image does not bleed on the edges; it's "contained".

This value scales the image and takes the longest dimension (horizontal or vertical). It makes sure that the image completely covers that dimension. Bleeding can occur if the container and the image have different aspect ratios.

When declaring the size of the background, we can use either one or two values. The first value is the width, and the second is the height of the background image.

Using one value means that the second value is set to auto. When using two values, we are then defining the width and height values of the background image.

We can use any measurement unit we want. Pixels, percentages, and the auto value are the most commonly used though.

We can even combine multiple images in the same container. The background shorthand property is the best way to handle this situation.

CSS:

.contain {
  background-size: contain;
}
.cover {
  background-size: cover;
}
.auto {
  background-size: auto;
}
.multiple {
  background-image: 
    url(../images/image-1.jpg),
    url(../images/image-2.jpg);
  background-size: 150px 100px, cover;
}

Here is a demo in CodePen: http://tiny.cc/background-size