DEV Community

Cover image for CSS Backgrounds
HyperCode for Devwares

Posted on • Edited on • Originally published at devwares.com

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.

Contrast Bootstrap UI Kit

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

Top comments (0)