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

Demo

See the Pen background-image by CSS-Tricks (@css-tricks) on CodePen.

Related

More Resources

Browser Support

Regular images work everywhere, and multiple images work in modern browsers and IE9+. Here's the support for gradients:

Chrome Safari Firefox Opera IE Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+

Comments

  1. User Avatar
    Bret
    Permalink to comment#

    Using this method – I want to hide the top layer on mobile width. I repeat background stack – but with that top layer deleted -and it still appears? When I tried opacity to hide it applied to all layers.

    #F3-Col1-Row1 {
            padding:77px 0px;
            background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/banners/Dash_mob_resp_med.png) no-repeat scroll right bottom, url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
            background-size: contain;
            @media only screen (max-width: 959px) {
                padding:33px 0px!important;
                background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
                background-size: contain;
            }
            @media only screen (max-width: 580px) {
                padding:33px 0px!important;
            }
            #F6-Col1-Row1 {
                padding-top: 50px;
            }
    
    }
    
  2. User Avatar
    asdf
    Permalink to comment#

    function example() {
    element.innerHTML = “#F3-Col1-Row1 {
    padding:77px 0px;
    background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/banners/Dash_mob_resp_med.png) no-repeat scroll right bottom, url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
    background-size: contain;
    @media only screen (max-width: 959px) {
    padding:33px 0px!important;
    background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
    background-size: contain;
    }
    @media only screen (max-width: 580px) {
    padding:33px 0px!important;
    }
    #F6-Col1-Row1 {
    padding-top: 50px;
    }

    }”;
    }

  3. User Avatar
    Angelo
    Permalink to comment#

    Excellent.

    I am beginning with JEE and reading this article I improved much my knowledge.

    Now I can better understand the mechanism how to program in this environment

  4. User Avatar
    Elmo
    Permalink to comment#

    can you tell me how to get to sesame street?

  5. User Avatar
    Paul
    Permalink to comment#

    I love the background of this page. I’ll love to know what css code to use to create a similar effect…

    • User Avatar
      Clay
      Permalink to comment#

      Right click the background and select “inspect” / “inspect element” / etc. to see the code used to create something. In this case it looks like he used a base64 encoded svg:

      background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);

  6. User Avatar
    Joshua

    how can i use an image saved on my pc as a background image.

  7. User Avatar
    nitin maurya
    Permalink to comment#

    Excellent.
    I love the background of this page.

  8. User Avatar
    luis
    Permalink to comment#

    i using the right path to insert background image in local site, but the image is not displaying, i dont know why, i tried everything it just doesn’t work

  9. User Avatar
    luis
    Permalink to comment#

    solved (../image
    the 2 points and the slash solves the problem!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag