CSS Backgrounds Tutorial
Tags: css, tutorial, beginners, writing
Published: 2022-07-25 14:30:00

In this tutorial, we’ll learn how to change the backgrounds of CSS elements.

The `background` property allows you to control the background of any element. It’s a _shorthand_ property, so we can write multiple properties in one code block. For example:
```
body {
  background:
     fixed                    /* attachment *
     blue;                    /* color */
     content-box              /* clip */
     url(background.jpg)      /* image */
     padding-box              /* origin */
     top center 300px 300px   /* position & size */
     no-repeat                /* repeat */
}
```
This example contains each of different properties that we can apply to backgrounds. Let’s take a look at these now..

## Background properties
The background of an element can be changed using each of these properties:

- `background-attachment`
- `background-color`
- `background-clip`
- `background-image`
- `background-origin`
- `background-position`
- `background-repeat`
- `background-size`

### background-attachment
Using `background-attachment` we can define how the background moves relative to the viewport (the part of the website, which is visible in the browser window).

We can use any of three values: `scroll`, `fixed`, and `local`.

`scroll` is the default behavior. The background will scroll with the page.

`fixed` attaches the background to the viewport, so that scrolling will not affect the background:
![Background-attachment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gny1ajz2sy0yqegnnmb.png)
This is often used to achieve parallax effects.

`local` is new to CSS3, it causes an element’s background to be fixed to the element itself. This resolves unexpected behavior when working with backgrounds inside of scroll box on a page.

### Background-color
The `background-color` property is quite self-explanatory. It changes our background color by accepting a color value, it can be a color keyword, an `rgb` or `hsl` value:
![Background-color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz18cf57jblc3s0tkjy6.png)
Check out my post to learn about [working with colors](https://dev.to/rembertdesigns/css-colors-tutorial-1kb7).

### Background-clip
We can use `background-clip` to create some neat effects. It lets you choose the area used by the background. The values we can use are:

- `border-box` the default value. The background will extend to the outside edge of the element’s border.
- `padding-box` clips the background at the edge of the element’s padding, without the border.
- `content-box` clips the background at the edge of the content box, without the padding.
- `inherit` applies the background-clip value of the parent to the element.

### Background-image
The `background-image` property applies a graphic to the background of an element.

We specify the our image location using URL, like so:
![Background-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x42rhlba8qombkhgzgl.png)
We can use a relative path (as above) or a full web address if located externally.

### Background-origin
With `background-origin` we can choose where to apply the background. It’s very similar to `background-clip` except it _resizes_ the background instead clipping it.

By default our background to is applied to the entire element (including padding) with `padding-box`. We could also set our background to the entire element including the border with `border-box`, or to the element without padding using `content-box`.

We’ll often use `background-size: cover` and `background-repeat: no-repeat` with this property. To prevent a background image from repeating under any borders or padding. More on these later.

### Background-position
When using a background image you’ll most often need to set it’s position. For this we use the `background-position` property. With this we can set the background image to the position specified within its container.

We can set the values using the keywords of `left`, `right` & `center` for the X (horizontal) axis, and `top` or `bottom` for the Y (vertical) axis:
![Background-position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28ljfhu56wm5z66royp2.png)
The default values are 0 0. This puts your background image at the top left of the container.

To be more specific with our positioning, we could instead use length values:
![Background-position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70ux8kj2m6vbb83ooo9e.png)
Here the first value is the horizontal position, second value is the vertical position. So `100px` `50px` will move the image 100px to the right and 50px down. The values can be set in `px`, `em`, or any other valid CSS length value.

We can also use percentages:
![Background-position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu33469fo15akkus6quj.png)
Moving a background image by percentage means the X% point in the image will align to the X% point in the container. So `50%` will align the middle of the image with the middle of the container. `100%` will align the last pixel of the image with the last pixel of the container.

### Background-repeat
When using an image that is smaller than the background, you can set its behavior with background-repeat, like so:
![Background-repeat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgedrfuga0to9zxmytul.png)
The possible values for this property are:

- `repeat`: repeat the image in both directions (this is the default!).
- `repeat-x`: repeat the image horizontally.
- `repeat-y`: repeat the image vertically.
- `no-repeat`: don’t repeat the image, just show it once.
- `space`: repeats the image in both directions, spacing them out evenly.
- `round`: repeats the image in both directions, stretching them to fill any available space.

We could also apply differing values to our axis’ in one line:
![Background-repeat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kbkbys1vef7ux2q7stu.png)
The first value being our horizontal axis, the second our vertical.

### Background-size
The last background property is `background-size`, and its perhaps one of the most useful! We can use 3 keywords: `auto`, `cover` and `contain` with `auto` being the default.

`auto` the browser automatically calculates the size based on the actual size of the image, preserving its aspect ratio.

`cover` expands the image to cover the entire element. If the element stretches, the image will crop a bit off at one of the edges to fit.

`contain` stops expanding the background image when one axis (x or y) covers the smallest edge of the image, which makes it fully contained within the element. Essentially, the whole image will always be shown, meaning there might be some space at the sides or bottom.

Additionally can specify a length value, which sets the width of the background image (the height will be automatic):
![Background-size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ico2ff5ugzm5sifluxkj.png)
If you specify a second value, the first is the width and the second the height:
![Background-size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpeh7b30iqc5a81jnwop.png)
Note: Any CSS size unit can be used, including px, %’s, ems, vh, vw, etc.

## Multiple Background Images
You can also _combine_ any of the above methods and apply them to multiple images, simply by adding commas between each:
![Multiple Background Images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaxfrjutum4yvhkn15e2.png)

In this example, our first image is set to 500x100 pixels, it sits above our second image which covers the entire area.

When using multiple images for the background, it's important to remember the stacking order. Each value corresponds to a layer: the first is the top layer, the second is the second layer, and so on. If a background color is set, it’ll always be the last layer.

## Summary
And that’s it! We’ve examined each of the background properties that we can work with in CSS. With this knowledge you can create some very unique layouts & unleash your inner creativity!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)