Background-size

The background-size property is used to define the background image's size.

Browser support for background-size has grown of late, with the current versions of most popular browsers now supporting the property, including Firefox, Safari, Chrome, Internet Explorer and Opera.

CSS Syntax

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

Let's see an example:

As you can see below, we defined the sizes of our background image. The image is actually 220 x 220 size but we defined it 120 x 80 in our example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/71d38a31907e8c1c64d52d021fd3b9a02ab5b0ce.jpeg");
        background-size: 120px 80px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Here is the result:



Let's see one more example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      td {
        background-image: url("/uploads/media/default/0001/01/86155f1da064357c3f88cb5c9dd0746901fe4ca8.jpeg");
        background-repeat: no-repeat;
        width: 200px;
        height: 180px;
        border: 1px solid #cccccc;
      }
      .pixel-size {
        background-size: 100px 90px;
      }
      .percent-size {
        background-size: 70%;
      }
      .original-size {
        background-size: auto;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <table>
      <tr>
        <td class="pixel-size"></td>
        <td class="percent-size"></td>
        <td class="original-size"></td>
      </tr>
    </table>
  </body>
</html>

Property Values

Value Descriptions
auto It means that the background image has its width and height. It is default value.
length It sets background image's width and height. First value we enter sets width and the second one sets height.If only one value is given, it means that the second one is set to auto.
percentage It sets background image's width and height in percent of parent element.First value we enter sets width and the second one sets height.If only one value is given, it means that the second one is set to auto.
cover It scales background image as large as possible to cover all the background area.
contain It scales background image to largest size, so that its width and height can fill inside the content area.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.