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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.