HTML | DOM Style backgroundPosition Property

The HTML DOM Style backgroundPosition : It sets or returns position of the background-image in an element.

Syntax:

  • To get the backgroundPosition property 
    object.style.backgroundPosition
  • To set the backgroundPosition property 
    object.style.backgroundPosition = value

Property Values:

  • keyword values: this is used to specify the position using keywords. If only one value is specified, the other value would be ‘center’ by default. The possible keyword combinations are:
    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right
  • x% y%: this is used to specify the position using percentage. The x% determines the horizontal position and y% determines the vertical position with respect to the initial top-left position.
  • xpos ypos: this is used to specify the position using a pixels or any other CSS measurement. The xpos determines the horizontal position and ypos determines the vertical position with respect to the initial top-left position.
  • initial: this is used to set this property to its default value.
  • inherit: this inherits the property from its parent.

The values are explained using the following examples:

Example-1: Using keyword values. We use the value ‘bottom right’ in this example.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
      DOM Style backgroundPosition Property
    </title>
    <style>
        .bg-img {
            height: 300px;
            width: 300px;
            border-style: solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
                        no-repeat center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style backgroundPosition Property
    </b>
    <p>
      Click on the button to change the 
      position of the background image
    </p>
    <div class="bg-img">
    </div>
  
    <button onclick="changePos()">
        Change position of background image
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to bottom vertically
            // and right horizontally
            elem.style.backgroundPosition = 'bottom right';
        }
    </script>
</body>
  
</html>

chevron_right






                        filter_none








Output:


    

  • Before pressing the button:
    
default output
    • 

  • After pressing the button:
    
keyword-bottom-right
    • 



Example-2: Using percentage to specify the position. We use ‘25% 75%’ to position the image.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <meta charset="UTF-8"> 


    <title> 


      DOM Style backgroundPosition Property 


    </title> 


    <style> 


        .bg-img { 


            height: 300px; 


            width: 300px; 


            border-style: solid; 


            background:  


url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')  


                        no-repeat center; 


        } 


    </style> 


</head> 


  


<body> 


    <h1 style="color: green"> 


      GeeksforGeeks 


    </h1> 


    <b> 


      DOM Style backgroundPosition Property 


    </b> 


    <p> 


      Click on the button to change the 


      position of the background image 


    </p> 


  


    <div class="bg-img"> 


    </div> 


    <button onclick="changePos()"> 


        Change position of background image 


    </button> 


  


    <script> 


        function changePos() { 


            elem = document.querySelector('.bg-img'); 


  


            // Setting the position to 25% horizontally 


            //and 75% vertically 


            elem.style.backgroundPosition = '25% 75%'; 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Before pressing the button:
    
default output
    • 

  • After pressing the button:
    
percentage
    • 



Example-3: Using fixed units to specify the position. We use ’50px 25px’ to position the image.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title> 


      DOM Style backgroundPosition Property 


    </title> 


    <style> 


        .bg-img { 


            height: 300px; 


            width: 300px; 


            border-style: solid; 


            background:  


url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png') 


                        no-repeat center; 


        } 


    </style> 


</head> 


  


<body> 


    <h1 style="color: green"> 


      GeeksforGeeks 


    </h1> 


    <b> 


      DOM Style backgroundPosition Property 


    </b> 


    <p> 


      Click on the button to change the  


      position of the background image</p> 


    <div class="bg-img"> 


    </div> 


  


    <button onclick="changePos()"> 


        Change position of background image 


    </button> 


  


    <script> 


        function changePos() { 


            elem = document.querySelector('.bg-img'); 


  


            // Setting the position to 50px horizontally 


           //and 25px horizontally 


            elem.style.backgroundPosition = '50px 25px'; 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Before pressing the button:
    
default output
    • 

  • After pressing the button:
    
fixed-value
    • 



Example-4: Using the initial value. This sets the position to its default value.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>DOM Style backgroundPosition Property</title> 


    <style> 


        .bg-img { 


            height: 300px; 


            width: 300px; 


            border-style: solid; 


            background:  


url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')  


                        no-repeat center; 


        } 


    </style> 


</head> 


  


<body> 


    <h1 style="color: green"> 


      GeeksforGeeks 


    </h1> 


    <b> 


      DOM Style backgroundPosition Property 


    </b> 


    <p> 


      Click on the button to change the  


      position of the background image 


    </p> 


    <div class="bg-img"> 


    </div> 


  


    <button onclick="changePos()"> 


        Change position of background image 


    </button> 


  


    <script> 


        function changePos() { 


            elem = document.querySelector('.bg-img'); 


  


            // Setting the position to the default  


            // value with initial 


            elem.style.backgroundPosition = 'initial'; 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Before pressing the button:
    
default output
    • 

  • After pressing the button:
    

    • 



Example-5: Using the inherit value. This inherits the position from its parent element.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title> 


      DOM Style backgroundPosition Property 


    </title> 


    <style> 


        /* Parent element */ 


          


        #parent { 


            height: 300px; 


            width: 300px; 


            border-style: solid; 


            /* Setting the parent's background-position 


          //to center left*/ 


            background-position: center left; 


        } 


          


        .bg-img { 


            height: 300px; 


            width: 300px; 


            background:  


url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png') 


                        no-repeat center; 


        } 


    </style> 


</head> 


  


<body> 


    <h1 style="color: green"> 


      GeeksforGeeks 


    </h1> 


    <b> 


      DOM Style backgroundPosition Property 


    </b> 


    <p> 


      Click on the button to change the  


      position of the background image 


    </p> 


    <div id="parent"> 


        <div class="bg-img"></div> 


    </div> 


  


    <button onclick="changePos()"> 


        Change position of background image 


    </button> 


  


    <script> 


        function changePos() { 


            elem = document.querySelector('.bg-img'); 


  


            // Setting the position to inherit from its parent 


            elem.style.backgroundPosition = 'inherit'; 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Before pressing the button:
    
default output
    • 

  • After pressing the button:
    

    • 



Supported Browsers: The browser supported by backgroundPosition Property are listed below:


    

  • Chrome 1.0
    • 

  • Internet Explorer 4.0
    • 

  • Firefox 1.0
    • 

  • Opera 3.5
    • 

  • Safari 1.0
    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
sayantanm19
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.