Fastest Way to Set CSS Backgrounds
Tags: webdev, tutorial, css
Published: 2020-12-21 16:36:27

Speed is essential in web development. Especially when prototyping. 

If you're not a 150WPM typing ninja, adding a background can be time consuming. And let's be honest...

Who wants to type `background-*: value;` **8 times**?

```css
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
```

That's a lot of typing, and a lot of space. We can use the background shorthand to turn all of that into a single line:

```css
background: scroll padding-box border-box transparent none 0% 0%/auto repeat;
```

Neat, huh?

In this article I want to show you how this shorthand works, and the rules you need to follow for it to work.

If you're not familiar with all of the properties above, please take a minute to read my quick introduction to [background properties](https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4) before reading this article. It will help you understand what's going on.

{% link https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4 %}

# Required Properties
You might be thinking to yourself now:

*Okay, it's nice that they're on the same line. But do I still need to write all of these values?*

No. Unlike the [font shorthand](https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd), all properties in the background shorthand are optional.

{% link https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd %}

Be careful though.

If you don’t include a value for one of the properties, its default value will be used. Even if you’ve defined that property earlier.

# Order of Properties

The order of properties doesn't matter. With a few small exceptions:

## Position & Size
`background-size` can only come immediately after `background-position`, and the two have to be separated with a slash (`/`).

![Position & Size Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/g0xj7qfjtwl8iqz07p2n.png)

This means you can't set `background-size` without `background-position` using this shorthand. 

There are two ways to work around that though:

1. Use the default `background-position` value, which is: `0% 0%`. For example `0% 0%/50%` would set `background-size` to `50%` and keep `background-position` unchanged.
2. Set `background-size` separately after the background shorthand. Like this:

```css
background: url("cat.png");
background-size: 50%;
```

> **IMPORTANT:** If you try setting `background-size`  in the shorthand using one of its keywords (`cover` or `contain`) without the `background-position` the whole `background` property will be treated as invalid and ignored.

## 📦 Origin & Clip

Because the values of `background-origin` and `background-clip` heavily overlap...

- `border-box`
- `padding-box`
- `content-box`
- `text` - This one's the exception. It's available only for `background-clip`.

 ...setting them using the shorthand works a bit differently. 

![Origin & Clip Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/ykg06pex55dk8njut2y7.png)

If you only include one of the box values, it will be used for both `background-origin` and `background-clip`. 

If you include two, the first one will be used for `background-origin` and the second one for `background-clip`. 

If you don't use any, both properties will keep their default values.

![Origin & Clip Example](https://dev-to-uploads.s3.amazonaws.com/i/barelj3ftz0jm0uxgk5u.png)

This is why I've labeled them as **box** in the images.

> **NOTE:** As far as I know, `background-clip`'s `text` value is not supported by the background shorthand. So if you want to create [gradient text](https://dev.to/hadrysmateusz/gradient-text-in-css-38g6), you will have to set `background-clip` separately.

## Multi Value Syntax

A few of the background properties can accept more than one value. It's important to keep those values next to each other and in the correct order.

**`background-size`** - If two values are provided, the first sets the width of the image, and the second its height.

**`background-repeat`** - If two values are provided, the first sets the repeat behavior for the horizontal (x) axis, and the second for the vertical (y) axis.

**`background-position`** - If two values are provided, the first controls the image's horizontal position, and the second its vertical position.


# 🎨 Color & Image

The background shorthand allows you to set a color or image as a background. You can even set both.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/drt7yag1ia74luims8ft.png)

*Wait, why would I need both?*

Setting a fallback `background-color` can be useful in many cases:

- If the image URL is broken or the image takes a long time to load, the background color can be a good placeholder.
- If the image contains transparency the background color will be visible underneath.
- If the value of `background-repeat` is other than `repeat` or `round`, there are likely to be areas not covered by the image. Those areas will be filled with the background color. You can see this above, in the `background-repeat` example image.

## Gradients

Have you ever tried to set a [gradient](https://dev.to/hadrysmateusz/complete-guide-to-css-gradients-1eck) as the `background-color`, only to be surprised that it doesn't work?

{% link https://dev.to/hadrysmateusz/complete-guide-to-css-gradients-1eck %}

That's because gradients are images in CSS. This is where the background shorthand comes in handy.

{% twitter 1341050093722603521 %}

# Layers

Just like all other `background-*` properties, the `background` shorthand can accept multiple comma-separated layers.

```css
background: url(cat.png) no-repeat scroll, 
            url(grass-texture.jpg) repeat local green;
```

There is just one thing you have to keep in mind. An element can only have one `background-color`, and it has to be on the last (bottom) layer. Otherwise the entire property will be treated as invalid.

# Cheatsheet
If you ever need a reminder, here’s a handy cheatsheet 😃

![Full Background Shorthand Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/0luug0s4x0m5rp0r4eti.png)

*Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. [Follow me](https://twitter.com/HadrysMateusz) for more web development tips.*

# Another article you might enjoy

### Some other articles you might enjoy

- [Easy Custom List Styles with Modern CSS](https://dev.to/hadrysmateusz/custom-list-styles-using-marker-before-4gi4) 🎨

- [Create Gradient Text in CSS](https://dev.to/hadrysmateusz/gradient-text-in-css-38g6) 🌈

- [Full Text Styling with a Single Line of CSS](https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd) ✍