CSS | background-size Property

The background-size property in CSS is used to set the size of the background image.

Syntax:

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

Property Values:

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

Syntax:
```
background-size: auto;
```

Example:

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

Output:

length: It is used to set the width and height of the background-image. The first value indicate the width, and the second value indicate 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:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            background-size Property 
        </title>  
          
        <style>  
            body {  
                background-image: url(  
'https://media.geeksforgeeks.org/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:

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

Syntax:
```
background-size: percentage;
```

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            background-size Property 
        </title>  
          
        <style>  
            body {  
                background-image: url(  
'https://media.geeksforgeeks.org/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:

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

Syntax:
```
background-size: cover;
```

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            background-size Property 
        </title>  
          
        <style>  
            body {  
                background-image: url(  
'https://media.geeksforgeeks.org/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:

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

Google Chrome 4.0, 1.0 -webkit-
Internet Explorer 9.0
Firefox 4.0, 3.6-moz-
Opera 4.1, 3.0 -webkit-
Safari 10.5, 10-o-

My Personal Notes

Suggest a Topic

Recommended Posts: