CSS background-size property

The background-size property sets the background image size.

It accepts two values: width and height.

Example

#

A resized background image using background-size.

<style>
  .withbg {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: no-repeat;
    background-size: 200px 150px;
    height: 200px;
  }
</style>

<div class="withbg"></div>
Tip: It's recommended to use the exact image size instead of resizing with CSS to reduce the page loading time and resources used.

Using background-size

background-size accepts 2 values: the width and the height.

Values are set as length units, such as, px, %, em, and others.

If only one value is provided, it will be used as both width and height.

Multiple background sizes can also be specified for multiple images.

Syntax

background-size: auto | length | cover | 
                 contain | initial | inherit;

Values

#

Value Description
auto Default. Displays background image original size.
length Sets width (first value) and height (second value) of background image. If the second value is not given, it will be set to auto.
percentage Sets width (first value) and height (second value) of background image in percent. If the second value is not given, it will be set to auto.
cover Stretch or crop background image to cover the entire container.
contain Resize background image to make it fully visible.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-size values.

<style>
  .bg-example {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 300px;
  }
</style>

<div class="bg-example"></div>

Browser support

This table shows when background-size support started for each browser.

Chrome
4.0 Jan 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
3.0 Jun 2007

You may also like

Guides