Related Articles

Related Articles

Set the size of background image using CSS ?
  • Difficulty Level : Basic
  • Last Updated : 15 Feb, 2019

The background-size property is used to set the background image size using CSS. Use height and width property to set the size of the background image.

Syntax:

background-size: width height;

Note:

  • If the first value is omitted then the image takes its original width.
  • If the second value is omitted then the image takes its original height.

Example 1: This example sets the background-size into width and height.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            Set the size of background image
        </title
          
        <style>
            #myDiv {
                height: 200px;
                width: 400px;
                background: 
                background-size: 400px 200px;
                  
            }
        </style>
    </head>
      
    <body
        <div id= "myDiv"></div>
    </body
</html>                    

chevron_right


Output:

Example 2: This example sets the background-size into percentage.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            Set the size of background image
        </title
          
        <style>
            #myDiv {
                height: 200px;
                width: 400px;
                background: 
                  
                /* Set the background-size in percentage */
                background-size: 70%;
                background-repeat: no-repeat; 
            }
        </style>
    </head>
      
    <body
        <div id= "myDiv"></div>
    </body
</html>                     

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :