CSS background-size Property

The background-size property specifies the size of the background images. It accepts values in pixels, percentages, or keywords such as `cover` (to ensure the image covers the entire element) and `contain` (to fit the image within the element), enabling flexible and responsive designs.

Syntax:

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

The background-size property can be specified with one of the following syntaxes:

Using the keyword value as ‘auto‘, ‘cover‘, and ‘contain‘.
Using single-value syntax i.e. setting the width property where height property is set to default value as auto.
Using double-value syntax having both width and height property, where the first value sets the width of the image and the second value is set the height of the image. Each value can either be in percentage, pixels, or auto.
For specifying the size of the multiple background images then use the comma to separate each value.

Default Value : Its default value is auto.

Property Values: All the properties are described well with the example below.

Table of Content

background-size : auto
background-size : length
background-size : percentage
background-size : cover

It is used to set the background-size property to its default value. It is used to display the background-image to its original size.

Syntax:

background-size: auto;

Example: This example illustrates the use of the background-size property whose value is set to auto.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> background-size Property </title>
    <style>
    body {
        background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png');
        background-size: auto;
        background-repeat: no-repeat;
    }
    </style>
</head>
<!DOCTYPE html>
<html>

<head>
    <title> background-size Property </title>
    <style>
        body {
            background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png');
            background-size: auto;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h2>background-size: auto;</h2>
</body>

</html>
<body>
    <h2>background-size: auto;</h2> 
</body>
</html>

Output:

It is used to set the width and height of the background-image. The first value indicates the width, and the second value indicates the height of the background image in terms of px, pt, em, etc. If any value is not given then it is set to auto.

Syntax:

background-size: length;

Example: This example illustrates the use of the background-size property whose value is set to a specific length value.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> background-size Property </title>
    <style>
        body {
            background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png');
            background-size: 400px 450px;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h2>background-size: length;</h2>
</body>

</html>

Output:

It is used to set the width and height in terms of percentage as related to the parent element. The first value indicates the width, and the second value indicates the height of the background image. If any value is not given it is set to auto.

Syntax:

background-size: percentage;

Example: This example illustrates the use of the background-size property whose value is specified in percentage.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> background-size Property </title>
    <style>
        body {
            background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png');
            background-size: 50%;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h2>background-size: percentage (%);</h2>
</body>

</html>

Output:

It is used to resize the background image to cover a whole container element.

Syntax:

background-size: cover;

Example: This example illustrates the use of the background-size property whose value is set to cover.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> background-size Property </title>
    <style>
        body {
            background-image: url(
'https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png');
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h2>background-size: cover;</h2>
</body>

</html>

Output:

initial: It is used to set an element’s CSS property to its default value.
inherit: It is used to inherit a property to an element from its parent element property value.

Supported Browsers: The browsers supported by the background-size property are listed below :

background-size : auto

background-size : length

background-size : percentage

background-size : cover

Contact Us