CSS - background-size Property

Quiz

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

Syntax

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

Property Values

Value	Description
auto	Background image is displayed in its original size. Default value.
length	This sets the dimensions of the background image. The first value specifies width, the second, height; if only one is given, the height defaults to auto.
percentage	This sets the background image dimensions as a percentage of the parent element. The first value specifies width, the second, height; if only one is provided, the height defaults to auto.
cover	Background image is resized to ensure that it fully fills the container. Stretching or chopping might be done in the process.
contain	Background image is resized to ensure that it is fully visible.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Size Property

The following examples will describe the background-size property.

Original Size of Image

In order to show the original size of the image without any change, we use the auto value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-auto {
            background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
            background-size: auto;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-auto"></div>
</body>

</html>

Image Size using Length

To set a specific size for the image, we can specify the length value, the width will be adjusted accordingly. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-length {
            background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
            background-size: 150px;
            background-repeat: no-repeat;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-length"></div>
</body>

</html>

Define Image Size using Percentage

The size of the image can also be specified in terms of percentage, we specify the percentage value to get the required size. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-percent {
            background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
            background-repeat: no-repeat;
            background-size: 90%;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-percent"></div>
</body>

</html>

Full Visibility of Image

To set the size of the image as large as possible to fit the container without cropping or stretching, we use the contain value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-contain {
            background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
            background-size: contain;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-contain"></div>
</body>

</html>

Completely Filled Image

To set the size of the image to smallest possible size to fit the container without leaving an empty space, we use the cover value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-cover {
            background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
            background-size: cover;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-cover"></div>
</body>

</html>

Supported Browsers

Property
background-size	4.0	9.0	4.0	4.1	10.5

css_reference.htm

Print Page