background

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 {
  background:
     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.

Recipes

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

Comments

  1. User Avatar
    Rhys
    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
    Kathleen
    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
      Kathleen
      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
    youl
    Permalink to comment#

    OOOh TRY this :

    body{
    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
    Jules
    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.

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