CSS Backgrounds

Adding backgrounds are easy ways to fill large pieces of screen space. There are numerous ways to modify backgrounds with properties like background-size and background-origin. We will cover almost all of the CSS properties we have to modify backgrounds with interactive widgets.

background-image

Using the CSS property background-image, we can add an image using a url or even add a background gradient. Below, I have examples which use the url() CSS function to get images and some gradients.

background-color

This lets us set the color of the background. This will not work if a background image covers the whole background.

background-size

Using the background-size CSS property lets you modify the size of the background. There are a multitude of ways to define background sizes.

The first way to define the size is with a single length value. This will define the the width of the background, The height of the background will be set to auto which will fit the aspect ratio of your image.

The contain and cover keywords can be used to automatically layout the background. contain makes the background as large as it can without cropping or stretching the image. cover fills the entire background onto the element and crops the background if needed.

background-repeat

background-repeat modifies how backgrounds will repeat. You can modify the repeat of both the x and y axis.

A few notable values are:

space
Attempts to place as many repeated backgrounds as possible without stretching or cropping any backgrounds. Any empty space is added between backgrounds.

round
Fairly hard to describe so instead I’ll quote from the MDN page on background-repeat.

As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#values

You can also apply background-repeat with a 2 value syntax to specify the background repeat in the horizontal and vertical axis respectively.

background-origin

This seldom useful CSS property is used to define the origin starting position of the background. This is useful if you want the origin of the background to start on the outside of the border or on the inside of the padding.

border-box
Positions the backgrounds origin on the border box.

padding-box
Positions the backgrounds origin on the padding box.

content-box
Positions the backgrounds origin on the content box.

background-clip

Similar to the background-origin property but determines if the background itself will extend underneath its border, padding or content.

border-box
Extends the background under the border.

padding-box
Extends the background under the padding.

content-box
Extends the background under the content.

background-position

This sets the position of the background relative to the origin of the background defined by its background-origin. There are numerous ways to set a backgrounds position. The easiest way is with keywords such as center, top, and left.

Try playing around with the widgets below with a background-repeat set to no-repeat for extra fun.

We can also use a 2 value syntax to define the x position and the y position of the background. % and px values can be used.

A 4 value syntax can be used as well. Specifying a value like background-position: right 40px top 20px will position the background 40px from the right and 20px from the top edge of the background.

This works similarly to positioning elements using the CSS property position and adjusting its position with values like top: 20px or right: 40px.

If the first position is right or left then the other value may not be right or left. If the first position is top or bottom then the other value may not be top or bottom.

Conclusion

There is a lot of properties to modify backgrounds in CSS. I did not cover background-attachment or the background CSS property in this tutorial. Personally, I don’t recommend the use of background since it’s fairly hard to read but here is a link to the MDN article on it anyways.