CSS Backgrounds

CSS Backgrounds

The CSS background property is used to set the background of an HTML element. It is a shorthand property for setting individual background properties in a single declaration.

body {
  background: #ffffff url('image.png') no-repeat right top;
}

In this example, we set the background color to white, the background image to 'image.png', the background repeat to 'no-repeat', and the background position to 'right top'.

However, the background property is a shorthand, so let's break down the individual properties:

Background Color

The background-color property sets the background color of an element. It can take any valid color value.

body {
  background-color: #ffffff;
}

In this example, the background color of the body is set to white.

Background Image

The background image property sets one or more background images for an element. The images are drawn on stacking context layers, with the first specified being drawn as if it is closest to the user.

body {
  background-image: url('image.png');
}

In this example, the background image of the body is set to 'image.png'.

Background Repeat

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

body {
  background-repeat: no-repeat;
}

In this example, the background image of the body is set to not repeat.

Background Position

The background position property sets the starting position of a background image.

body {
  background-position: right top;
}

In this example, the background image of the body is positioned at the top-right corner.

Background Size

The background size property specifies the size of the background images.

body {
  background-size: 50%;
}

In this example, the background image of the body is set to cover 50% of the body.

Background-Origin

The background-origin property specifies where the background image is positioned. It can take one of the following values: border-box, padding-box, or content-box.

Example:

body {
  background-origin: padding-box;
}

Background-Clip

The background-clip property defines how far the background (color or image) should extend within an element. It can take one of the following values: border-box, padding-box, or content-box.

Example:

body {
  background-clip: content-box;
}

Background-Attachment

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Example:

body {
  background-image: url("paper.gif");
  background-attachment: fixed;
}