Lesson 36: Backgrounds

Behind every CSS box is a special layer called the background layer. CSS gives you many ways to change it. You can even stack more than one background.

The background layer sits the furthest from the user. It is drawn behind the contents of a box, starting from the box’s padding-box area. This means the background layer does not overlap the borders at all.

Background color#

One of the simplest things you can do to a background layer is set its color. The starting value of background-color is transparent. That lets the contents of a parent show through. A real color set on a background layer sits behind everything else drawn on that element.

Background images#

On top of the background-color layer, you can add a background image with the background-image property. A background-image accepts two kinds of value.

• An image URL or a data URI using the url CSS function.
• An image made on the fly by a gradient CSS function.

Setting a background-image with the url CSS function#

CSS gradient backgrounds#

Several gradient CSS functions let you make a background image. You pass them two or more colors.

No matter which gradient function you use, the image it makes is sized to fit the space available.

Here is a demo that applies a background image with gradient functions.

Repeating background images#

By default, background images repeat across and down to fill the whole space of the background layer.

You can change this with the background-repeat property using one of these values.

• repeat repeats the image in the space available, cropping it as needed.
• round repeats the image across and down to fit as many copies as it can in the space available. As the space grows, the image stretches. After stretching half of the image’s original width, it shrinks so it can add more copies.
• space repeats the image across and down to fit as many copies as it can in the space available without cropping. It spaces the copies out as needed. The copies touch the edges of the space the background layer takes up, with the white space spread evenly between them.

The background-repeat property lets you set the behavior for the x and y axis on their own. The first value sets how it repeats across. The second value sets how it repeats down.

If you use a single value, it applies to both the across and down repeats.

The shorthand also has handy one-word options to make your meaning clearer.

The value repeat-x repeats an image only across. This is the same as repeat no-repeat.

The following demo shows what the background-repeat property can do.

Background position#

You may have noticed that some images on the web use a background-repeat: no-repeat declaration. Those images show up at the top left of their container.

The starting position of background images is the top left. The background-position property lets you change that by moving the image.

Like background-repeat, the background-position property lets you place images along the x and y axis on their own with two values by default.

When you use CSS lengths and percentages, the first value is the across axis and the second value is the down axis.

When you use only keywords, the order does not matter. Do this.

background-position: left 50%;

Do this.

background-position: top left;

Do this.

background-position: left top;

Order does not matter for keywords on different axes. Don’t do this.

background-position: 50% left;

When you mix CSS values with keywords, the order matters. The first value is the across axis and the second is the down axis. Don’t do this.

background-position: left right;

You can’t use two keywords for the same axis at once.

The background-position property also has a handy one value shorthand. The value you leave out becomes 50%. Here is an example that shows this using the keywords the background-position property accepts.

As well as its two value form and its one value form, the background-position property also accepts up to four values.

When you use three or four values, a CSS length or percentage must come after a top, left, right, or bottom keyword. This is so the browser knows which edge of the CSS box the offset starts from.

When you use three values, a CSS length or value can be the second or third value, with the other two being keywords. The keyword it follows sets the edge the length or value is measured from. The offset of the other keyword is set to 0. Do this.

background-position: bottom 88% right;

Do this.

background-position: right bottom 88%;

Don’t do this.

background-position: 88% bottom right;

A CSS length value must come after the top, right, bottom, or left keywords when you use three or more values. Do this.

background-position: bottom 88% right 33%;

Do this.

background-position: right 33% bottom 88%;

Don’t do this.

background-position: 88% 33% bottom left;

A CSS length value must come after the top, right, bottom, or left keywords when you use three or more values.

If you apply background-position: top left 20% to a CSS background image, the image is placed at the top of the box. The 20% value is a 20% offset from the left of the box, on the x axis.

If you apply background-position: top 20% left to a CSS background image, the 20% value is a 20% offset from the top of the CSS box, on the y axis. The image is placed at the left of the box.

When you use four values, the two keywords are each paired with a value that offsets from the edge of that keyword. If you apply background-position: bottom 20% right 30% to a background image, the image is placed 20% from the bottom and 30% from the right of the CSS box.

The following demo shows this behavior.

Here are more examples of using the background-position property with a mix of CSS and keyword values.

[!NOTE] To learn more about the fine points of positioning backgrounds, check out background-position on MDN.

Background size#

The background-size property sets the size of background images. By default, background images are sized from their real width, height, and aspect ratio.

The background-size property uses CSS length and percentage values, or certain keywords. It accepts up to two values, which let you change the width and height of a background on their own.

The background-size property accepts these keywords.

• auto sizes the background image from its real width and height when used on its own. When you use auto for the width (first value) or the height (second value) alongside another CSS value, the side set to auto is sized to keep the image’s natural aspect ratio. This is the default behavior of the background-size property.
• cover covers the whole area of the background layer. This may mean the image is scaled or cropped.
• contain sizes the image to fill the space without stretching or cropping. Because of this, empty space can remain, which makes the image repeat unless background-repeat is set to no-repeat.

The last two are meant to be used on their own, without another value.

The following demo shows these keywords in action.

Background attachment#

The background-attachment property lets you change how background images stay in place once the layer shows on screen.

It accepts 3 keywords, scroll, fixed, and local.

The default behavior of the background-attachment property is the starting value of scroll. When more space is needed, the images move with that space inside the background layer, set by the bounds of the CSS box.

The value fixed fixes the position of background images to the viewport.

Once the space the background layer images first take up needs to be scrolled offscreen, the images in the background layer stay fixed in their first position until the whole layer is scrolled off the screen by the viewport.

The local keyword fixes the position of background images relative to the element’s contents. The background images now move along the space they take up as that space shows inside and outside the bounds of the CSS box. This usually happens because of scrolling, 2D, or 3D transforms.

Background origin#

The background-origin property lets you change the area a background covers in a box. The values it accepts match the border-box, padding-box, and content-box regions of a box.

Try these options out in the following demo.

Background clip#

The background-clip property controls what you actually see of a background layer, no matter the bounds set by the background-origin property.

Like background-origin, the regions you can set are border-box, padding-box, and content-box. These match where a CSS background layer can be drawn. When you use these keywords, any part of the background past the region you set is cropped, or clipped.

The background-clip property also accepts a text keyword. This clips the background so it goes no further than the text in the content box. For this effect to show in the text itself, the text must be partly or fully transparent.

This is a fairly new property at the time of writing. Chrome and most browsers need the -webkit- prefix to use it.

[!TIP] This property does not work when background-clip: text is set at the same time on a CSS box.

Multiple backgrounds#

As mentioned at the start of the module, the background layer lets you set more than one sublayer. To keep things short, I will call these sublayers backgrounds.

Multiple backgrounds are set from top to bottom. The first background is the closest to the user. The last background is the furthest from the user.

The only background, or the last layer, is called the final background layer by the browser. Only this layer is allowed to set a background-color.

[!NOTE] The web is unpredictable, so a background image may fail to load. Setting a background color on the final layer keeps good contrast for text and the like if important background layers fail to load.

You can set up each layer on its own using most background-related CSS properties, separated by commas. The code snippet and live demo below show this.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

The background shorthand#

To make it easier to style the background layer of a box, especially when you want more than one background layer, there is a shorthand that follows this pattern.

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

[!TIP] It is important to note that any background properties you leave out of the shorthand are set to their starting values.

Order matters in the shorthand form when you declare multiple backgrounds. You must give both the position and size values, separated by a slash (/). Setting the origin and clip behavior in the right order lets you use keywords that are valid for both at once.

The following declaration clips the background and starts it from the content box.

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

With these shorthand rules in mind, the earlier background declarations could be rewritten like this.

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).