The Startup
Published in

The Startup

The Fastest Way to Set CSS Backgrounds

Replace 8 properties and 8 lines of CSS with just 1

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?

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:

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 before reading this article. It will help you understand what’s going on.

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, all properties in the background shorthand are optional.

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 set 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 (/).

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:

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.

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.

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, 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.

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 as the background-color, only to be surprised that it doesn't work?

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

Layers

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

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 😃

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Click them, don’t be shy 😉

Other Interesting Articles

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

The Raw & Real Approach to Observability — Honeycomb

Photo of white dog with blue eyes taking a treat from a person’s hand.

Building a Dockerized Angular and Spring Boot Application using nginx

How to Deploy a web app with Laravel Vapor

PMC Member and Committership Invitation from Apache Nutch

Selenium tutorial with Twitter

Colour Coding — Part 3

The Single Responsibility Principle

AWS re:Invent 2021 –Day 4

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mateusz Hadryś

Mateusz Hadryś

I write about web development tips & news. Follow me on twitter for more: twitter.com/HadrysMateusz

More from Medium

How to make a light and dark mode button in HTML, CSS, and JS!

An Introduction to Web Development With HTML

5 Reasons To Try CSS Grid On Your Next UI Development

Front-End Conventions and Coding Practices (pt.1 HTML)