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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title>
                background-size Property
            </title
              
            <style
                body { 
                    background-image: url( 
                    background-size: auto;
                    background-repeat: no-repeat;
                
            </style
        </head
          
        <body
            <h2>background-size: auto;</h2>
        </body
    </html>                                                

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title>
                background-size Property
            </title
              
            <style
                body { 
                    background-image: url( 
                    background-size: 400px 450px;
                    background-repeat: no-repeat;
                
            </style
        </head
          
        <body
            <h2>background-size: length;</h2>
        </body
    </html>                                     

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title>
                background-size Property
            </title
              
            <style
                body { 
                    background-image: url( 
                    background-size: 50%;
                    background-repeat: no-repeat;
                
            </style
        </head
          
        <body
            <h2>background-size: percentage (%);</h2>
        </body
    </html>                                  

    chevron_right

    
    

  • Output:

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

  • Syntax:
    background-size: cover;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title>
                background-size Property
            </title
              
            <style
                body { 
                    background-image: url( 
                    background-size: cover;
                    background-repeat: no-repeat;
                
            </style
        </head
          
        <body
            <h2>background-size: cover;</h2>
        </body
    </html>                           

    chevron_right

    
    

  • 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 arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.