background-size

The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example:

html {
  background: url(greatimage.jpg);
  background-size: 300px 100px; 
}

That's an example of the two-value syntax for background size. There are four different syntaxes you can use with this property: the keyword syntax, the one-value syntax, the two-value syntax, and the multiple background syntax.

Keywords

In addition to the default value (auto), there are two keywords you can use with background-size: cover and contain

The difference

cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain, on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

One Value

If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

Two Values

If you provide two values, the first sets the background image's width and the second sets the height. Like the single value syntax, you can use whatever measurement units you like.

Multiple Images

You can also combine any of the above methods and apply them to multiple images, simply by adding commas between each syntax. Example:

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Keep background image stacking order in mind when using multiple images.

Demo

This demo shows examples of cover, contain, and multiple background images with a mix of pixel and keyword values.

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

Related

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
3+ 4.1+ 3.6+ 10+ 9+ 2.3+ 4.0+

Comments

  1. User Avatar
    WangNingning
    Permalink to comment#

    really helpful.

  2. User Avatar
    hadeel
    Permalink to comment#

    Very great article
    thank you

  3. User Avatar
    RON
    Permalink to comment#

    thats cool, but if you want a carousel to maintain the entire image as the page responds from computer down to phone how do you do that?

  4. User Avatar
    leno
    Permalink to comment#

    When using the ‘cover’ property, how can keep the image centered even when scaling down for responsive?

    • User Avatar
      Daniel
      Permalink to comment#

      Just use background-position to center the background image. Like the following to center it horizontally in the top (if that’s what you need):
      background-size: cover;
      background-position: center 0;

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag