CSS - background-size Property

The background-size CSS property is used in setting the size of the background image of the element. The background image can either be stretched, constrained or left to its normal size.

The background-color property fill the spaces that are not covered by the background image. In case the background image is transparent or translucent, the background color will be visible.

Possible Values

  • contain: Sets the size of the image as large as possible to fit the container without cropping or stretching.

  • cover: Sets the size of the image to smallest possible size to fit the container without leaving an empty space, while preserving the image's ratio.

  • auto: Sets the size of the image such that the intrinsic proportions of the image are maintained.

  • <length>: Based on the specified length value, the image is stretched in the corresponding direction. Negative values are invalid.

  • <percentage>: Based on the specified percentage of background positioning area, the image is stretched in the corresponding direction. The background positioning area is determined by the value of background-origin. Negative values are invalid.

In order to specify the sizes for multiple background images, you should separate the values for each using a comma.

On the basis of intrinsic dimensions and proportions of the background image, its rendered size is computed in the following manner:

  • When both components of background-size are specified and the value is not auto: Background image is rendered as per the specified size.

  • When the value of background-size is contain or cover:

    • Background image is rendered at the largest size contained in or covering the background positioning area, while preserving the intrinsic proportions.

    • Background image is rendered at the size of the background positioning area, when the image has no intrinsic proportions.

  • When background-size is auto or auto auto:

    • When image has both horizontal and vertical intrinsic dimensions, the image is rendered at the specified size.

    • When image has no intrinsic dimensions or proportions, it is rendered at the size of background positioning area.

    • When image has no intrinsic dimensions, but has intrinsic proportions, it is rendered as per the value of contain.

    • When image has one intrinsic dimension and has intrinsic proportions, it is rendered at the size as per the one dimension. Other dimension is calculated based on the one dimension and the intrinsic proportions.

    • When image has one intrinsic dimension and no intrinsic proportions, it is rendered as per the one dimension and other dimension of the background positioning area.

  • When background-size has one auto component and one non-auto component:

    • When the image has intrinsic proportions, it is stretched based on the specified dimension. The dimension that is not specified is calculated using the specified dimension and the intrinsic proportions.

    • When the image has no intrinsic proportions, it is stretched based on the specified dimension. The dimension that is not specified is calculated using the intrinsic dimension, if specified; else it is set to the corresponding dimension of the background positioning area.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundSize = "cover | contain | auto | <length> | <percentage>"

CSS background-size - <length> Value

The following example demonstrates the background-size: 150px property sets the size of the background image to 150px −

<html>
<head>
<style>  
   .size-length {
      background-image: url('images/pink-flower.jpg');
      background-size: 150px;
      background-clip: padding-box;
      width: 300px;
      height: 300px;
      border: 5px dashed;
      color: rgb(25, 6, 75);
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="size-length"></div>
</body>
</html>

CSS background-size - <percentage> Value

The following example demonstrates the background-size: 90% property sets the size of the background image to 90% −

<html>
<head>
<style>  
   .size-percent {
      background-image: url('images/pink-flower.jpg');
      background-repeat: no-repeat;
      background-size: 90%;
      background-clip: content-box;
      width: 300px;
      height: 300px;
      border: 5px dashed;
      color: rgb(25, 6, 75);
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="size-percent"></div>
</body>
</html>

CSS background-size - contain Value

The following example demonstrates the background-size: contain property sets the size of the image as large as possible to fit the container without cropping or stretching −

<html>
<head>
<style>  
   .size-contain {
      background-image: url('images/pink-flower.jpg');
      background-size: contain;
      background-clip: content-box;
      width: 300px;
      height: 300px;
      border: 5px dashed;
      color: rgb(25, 6, 75);
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="size-contain"></div>
</body>
</html>

CSS background-size - cover Value

The following example demonstrates the background-size: cover property sets the size of the image to smallest possible size to fit the container without leaving an empty space −

<html>
<head>
<style>  
   .size-cover {
      background-image: url('images/pink-flower.jpg');
      background-size: cover;
      background-clip: border-box;
      width: 300px;
      height: 300px;
      border: 5px dashed;
      color: rgb(25, 6, 75);
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="size-cover"></div>
</body>
</html>

CSS background-size - auto Value

The following example demonstrates the background-size: auto property automatically sets size of the image to maintained intrinsic proportions of the image − 

<html>
<head>
<style>  
   .size-auto {
      background-image: url('images/pink-flower.jpg');
      background-size: auto;
      width: 300px;
      height: 300px;
      border: 5px dashed;
      color: rgb(25, 6, 75);
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="size-auto"></div>
</body>
</html>

CSS background-size - <length> <length> Value

The following example demonstrates the background-size: 500px 150px property sets the size of the background image to 500px wide and 150px high −

<html>
<head>
<style>  
   .size-auto {
      border: 2px solid black;
      padding: 25px;
      background: url('images/scenery2.jpg');
      background-repeat: no-repeat;
      background-size: auto;
      width: 100%;
      margin-bottom: 5px;
   }
   .size-length {
      border: 2px solid black;
      padding: 25px;
      background: url('images/scenery2.jpg');
      background-repeat: no-repeat;
      background-size: 500px 150px;
      color: white;
   }
</style>
</head>
<body>
   <div class="size-auto">
      <h2>Background-size: auto</h2>
      <p>The background image is displayed in its original size.</p>
   </div>

   <div class="size-length">
      <h2>background-size:500px 150px</h2>
      <p>The background image is set to 500px wide and 150px high.</p>
   </div>
</body>
</html>

CSS background-size - With Multiple Image

The following example demonstrates how to set the size of the background when multiple background images are present −

Here is an example with multiple images− 

<html>
<head>
<style>  
   .multiple-images {
      border: 2px solid black;
      padding: 25px;
      background: url('images/logo.png'), url('images/scenery2.jpg');
      background-repeat: no-repeat;
      background-size: 400px 200px, cover;
      width: 500px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="multiple-images"></div>
</body>
</html>
Advertisements