background-image

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 an entire guide on how to make and use them.

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. There’s a good example of multiple background images with animation on David Walsh’s blog.

Demo

Browser support

IE	Edge	Chrome	Firefox	Safari	Opera
All	All	All	All	All	All

iOS Safari	Chrome Android	Firefox Android	Android Browser	Opera Mobile
All	All	All	90+	62+

Background image gradient support

IE	Edge	Chrome	Firefox	Safari	Opera
10+	All	All	3.6+	4+	11.5+

iOS Safari	Chrome Android	Firefox Android	Android Browser	Opera Mobile
All	All	All	90+	62+

Background image SVG support

IE	Edge	Chrome	Firefox	Safari	Opera
9+	All	8+	4+	5+	All

iOS Safari	Chrome Android	Firefox Android	Android Browser	Opera Mobile
5+	All	All	90+	62+

More information

• CSS Backgrounds and Borders Module Level 3 (W3C)
• Understanding Success Criteria 1.1.1 (W3C Accessibility)
• How to Change a CSS Background Image’s Opacity (DigitalOcean)
• How to Apply Background Styles to HTML Elements With CSS (DigitalOcean)

Related tricks!

Related properties