CSS Backgrounds
Tags: css, webdev, beginners, programming
Published: 2024-06-08 23:15:34

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xg931h2tzgm45g435ji.png)


```css
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](https://www.devwares.com/tailwindcss/classes/tailwind-background-color/) property sets the background color of an element. It can take any valid color value.

```css
body {
  background-color: #ffffff;
}

```

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

## Background Image

The [background image](https://www.devwares.com/tailwindcss/classes/tailwind-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.

```css
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](https://www.devwares.com/tailwindcss/classes/tailwind-background-repeat/) property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

```css
body {
  background-repeat: no-repeat;
}

```

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

## Background Position

The [background position](https://www.devwares.com/tailwindcss/classes/tailwind-background-position/) property sets the starting position of a background image.

```css
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](https://www.devwares.com/tailwindcss/classes/tailwind-background-size/) property specifies the size of the background images.

```css
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](https://www.devwares.com/tailwindcss/classes/tailwind-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:

```css
body {
  background-origin: padding-box;
}

```


## Background-Clip

The [background-clip](https://www.devwares.com/tailwindcss/classes/tailwind-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:

```css
body {
  background-clip: content-box;
}

```

## Background-Attachment

The [background-attachment](https://www.devwares.com/tailwindcss/classes/tailwind-background-attachment/) property sets whether a background image scrolls with the rest of the page, or is fixed.

Example:

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

```


![Contrast Bootstrap UI Kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xg931h2tzgm45g435ji.png)