Skip to content
Related Articles

Related Articles

CSS | background-size Property
  • Last Updated : 07 Aug, 2019

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( 
                    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( 
                    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( 
                    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( 
                    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 arrow_drop_up
Recommended Articles
Page :