Backgrounds

In CSS you can do a lot to style the background behind your content.

What exactly is a background?

The background of an element is the area that sits underneath an element's content, padding, and border.

The background doesn't sit underneath the margin — the margin doesn't count as part of the element's area but rather the area outside the element.

There are many other different properties you can use to manipulate the element's background.

Now let's look at how to use these features in detail.

The basics: color, image, position, repeat

Let's explore a simple example to show how the four most basic properties work — you'll use these all the time when dealing with backgrounds.

Background color

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
}

Background image

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

Background repeat

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

Background position

<p>Exciting box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

Background attachment

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment property, which can take the following values:

The background-attachment property only has an effect when it is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

See this demonstration to see how these scroll effects work.

Multiple backgrounds

Fairly recently (since Internet Explorer 9), we could attach multiple backgrounds to a single element. This is a good thing, as multiple backgrounds are very useful. You separate your different background definitions with commas:

p {
  background: url(image.png) no-repeat 99% center, url(background-tile.png), linear-gradient(
      to bottom,
      yellow,
      #dddd00 50%,
      orange
    );
  background-color: yellow;
}

And the backgrounds are stacked on top of one another with the first appearing at the top, then the second below it, then the third, etc. This is possibly not what you were expecting, so take care. Also, note that we've put the fallback background color into a separate property declaration because trying to include it in multiple backgrounds seems to break things.

You can also put multiple values into longhand background-* properties, for example:

p {
  background-image: url(image.png), url(background-tile.png);
  background-repeat: no-repeat, repeat;
}

Although you are probably better off using background shorthand — not only is it quicker to write, but it is easier to see which background properties apply to which background.

<p>Exciting Box!</p>

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png)
      no-repeat 99% center, linear-gradient(
      to bottom,
      yellow,
      #dddd00 50%,
      orange
    );
}

Background size

As we mentioned earlier, there is a property available — background-size — which allows you to dynamically alter the size of a background image so that it fits better into your design. This is very useful in many ways, for example, automatically correcting the size of icons that aren't uploaded correctly. Just bear in mind that this isn't supported by Internet Explorer versions lower than 9, so you can't rely on it if you need to support older browsers. For each background-image, you need to include two background size values — one for the horizontal dimension, and one for the vertical:

p {
  background-image: url(myimage.png);
  background-size: 16px 16px;
}

You can use all the length units you'd expect, to be able to specify the values you want — px, percentages, rems, etc.