The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

body {
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */

background is made up of eight other properties:

You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don't specify in the background property is automatically set to its default. So if you do something like this:

body {
  background-color: red;
  background: url(sweettexture.jpg);

The background will be transparent, instead of red. The fix is easy though: just define background-color after background, or just use the shorthand (e.g. background: url(...) red;)

Multiple Backgrounds

CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to backgrounds can take a comma separated list, like this:

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;

Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value is the second layer, and the background color is always the last layer.


See the Pen emBzRd by Timothy Miller (@tjacobdesign) on CodePen.

Browser Support

Support varies among the different specific properties, and each corresponding article in the Almanac has unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and anything that isn't supported just falls back to the next best thing, whether that's an image or a color.

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works


  1. User Avatar
    Permalink to comment#

    Would it be worth updating this article to include details about multiple background images?

  2. User Avatar
    Alex Bell
    Permalink to comment#

    Whoa, don’t forget “center” as a possible value for background-position, since you’re claiming this as a”complete list”.

  3. User Avatar
    Permalink to comment#

    Per Rhys’ comment, I would love to see this article updated for multiple bg images, with gradients, and on retina display. Currently, I’m having a problem because while I can have multiple images in the background, I can only seem to set one background-size. Also, setting background size on a gradient causes the gradient to fill half the space (and setting the color stops to 200% doesn’t seem to do anything. This means that when a designer creates a button with a bg gradient and an icon, I have to create multiple objects with bg images instead of one object with multiple bg images.

    • User Avatar
      Permalink to comment#

      Of course, as soon as I posted the above comment, I found that I could do multiple background-sizes (comma-separated). In any case, it would be good to either include that information here or in another article.

  4. User Avatar
    Wahib El Younssi
    Permalink to comment#

    Great, but would be perfect if you add this two values ​​together, use of image & color at the same time:

    background: url (img/bg.png) repeat center #EEEEEE;

  5. User Avatar
    Permalink to comment#

    OOOh TRY this :

    background: url(img.jpg) fixed;
    -webkit-background-size: cover;
    background-attachment: fixed;

  6. User Avatar
    Vinay Raghu
    Permalink to comment#

    Background size alone needs a slash prefixed to it. Was wondering why my code wasn’t working. Popped over here to check. All good. Thanks!

  7. User Avatar
    Permalink to comment#

    Is it possible at all to attach a data attribute to the html element (e.g. data-image) and then use that image as the background with CSS using something like attr(data-image)? I consider the choice of image as part of the content in my situation, but I can’t get it show properly.

  8. User Avatar
    Permalink to comment#

    This is a nice article …. and nice writing about background ….. so many many thanks to u

  9. User Avatar

    How can I add a background same like the title? Red with white line trails!

    • User Avatar
      Permalink to comment#

      That red with white line is svg.You can access it by inspecting and use it as it is.

  10. User Avatar
    Permalink to comment#

    It might be worthwhile to point out that if your background image file name contains any spaces, you need to quote the URL.

    background: url("my dog.jpg")

  11. User Avatar
    Permalink to comment#

    We have this in our CSS file and our blog/page background is white with violet edges framing each page/blog (obviously behind)

    body {
      background: #CCCCCC url(images/violet-fabric.gif);
      background: white;

    I have tried to upload a plain white.gif to see if we can change the awful violet, but it is not changing. Can you help?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey! Are you able to remove the image from the background property altogether?

      background: #cccccc;

      Also, is it possible that there is another element that is using the violet color? If so, you may need to remove it from there as well.

    • User Avatar
      Permalink to comment#

      Thanks so much for getting back to me. I can try to remove the element altogether and see what happens. As far as I can see, no other element is using this violet-fabric.gif, but in two places the css uses a violet hex code which should not be affected at all.

      Forgive my ignorance, what why does that line of coding have // in front of it? (I am very new to this all and learning as I go)

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Those // mean that the property is commented out and will not render. If you remove them, that property will be included in the code.

      …but that begs another question: are you editing a CSS file or some other type of file? That type of comment format is used by something like Sass (.scss), Less (.less) or another CSS preprocessor.

Leave 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.