CSS background-size Property

CSS background-size

The background-size property in CSS specifies the size of the background image. This property is used to control how the background image is displayed, whether it should stretch, scale, or fit within the element.

Syntax of background-size

</>

Copy

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

Values

Value	Description
`auto`	The background image retains its original size.
`length`	Specifies the width and height of the background image in CSS units (e.g., `px`, `em`, `%`).
`cover`	Scales the background image to cover the entire element, maintaining its aspect ratio. Some parts may be clipped.
`contain`	Scales the background image to be fully visible inside the element, maintaining its aspect ratio.
`initial`	Sets the property to its default value (`auto`).
`inherit`	Inherits the value from the parent element.

Default Value

auto

Examples for background-size

Using the CSS background-size Property

The following examples demonstrate how to use the background-size property with different values.

</>

Copy

/* Background retains its original size */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-size: auto;
}

/* Background size specified in length (200px wide, 100px high) */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-size: 200px 100px;
}

/* Background scales to cover the element */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-size: cover;
}

/* Background scales to fit inside the element */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-size: contain;
}

Example for Cover Background

Below is an example demonstrating how to scale the background image to cover the entire element using background-size: cover:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-size: cover;
  }
</style>
</head>
<body>
  <h1>Background Size: Cover</h1>
  <div class="box"></div>
</body>
</html>

Example for Contained Background

background-size: contain;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-size: contain;
  }
</style>
</head>
<body>
  <h1>Background Size: Contain</h1>
  <div class="box"></div>
</body>
</html>

Example for Specific Size Background in Pixels

background-size: 100px;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-size: 100px;
  }
</style>
</head>
<body>
  <h1>Background Size: 100px</h1>
  <div class="box"></div>
</body>
</html>

Example for Specific Size Background in Percentage

background-size: 50%;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-size: 50%;
  }
</style>
</head>
<body>
  <h1>Background Size: 50%</h1>
  <div class="box"></div>
</body>
</html>

Browser Support

The background-size property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	4
Edge	9
Firefox	4
Safari	4.1
Opera	10

TutorialKart

CSS background-size Property