Background image using CSS

The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element.

There are two different types of images you can include with CSS: regular images and gradients.

Images

Using an image on a background is pretty simple:

body {
  background: url(sweettexture.jpg);
}

The url() value allows you to provide a file path to any image, and it will show up as the background for that element.

You can also set a data URI for the url(). That looks like this:

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

This technique removes one HTTP request, which is a good thing. But, there are a number of downsides, so before you start replacing all of your images make sure you consider all the pros and cons of Data URIs.

You can also use background-image to sprite images, which is another useful method for reducing HTTP requests.

Gradients

Another option when using backgrounds is to tell the browser to create a gradient. Here's a super-duper simple example of a linear gradient:

body {
  background: linear-gradient(black, white);
}

You can also use radial gradients:

body {
  background: radial-gradient(circle, black, white);
}

Technically speaking, gradients are just another form of background image. The difference is that the browser makes the image for you. Here’s how to write them: CSS3 Gradient Syntax

The example above uses only one gradient, but you can also layer multiple gradients on top of each other. There are some pretty amazing patterns you can create using this technique.

Setting a Fallback Color

If a background image fails to load, or your gradient background is viewed on a browser that doesn't support gradients, the browser will look for a background color as a fallback. You can specify your fallback color like this:

body {
  background: url(sweettexture.jpg) blue;
}

Multiple Background Images

You can use multiple images, or a mixture of images and gradients, for your background. Multiple background images are well-supported now (all modern browsers and IE9+ for graphic images, IE10+ for gradients).

When you're using multiple background images, be aware that there's a somewhat counter-intuitive stacking order. List the image that should be at the front first, and the image that should be at the back last, like this:

body {
  background: url(logo.png), url(background-pattern.png);
}

When you're using multiple background images, you'll often need to set more values for the background to get everything in the right place. If you want to use the background shorthand, you can set the values for each image individually. Your shorthand will look something like this (notice the comma separating the first image and its values from the second image and its values):

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

There's no limit to how many background images you can set, and you can do cool things like animate your background images.