Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to change the position of background image using jQuery ?

  • Last Updated : 30 Sep, 2021

In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property. 

The css() method is used to change the style property of the selected element. The float property is used to change the normal flow of an element. It defines how an element should float and place an element on its container’s right or left side. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

$(selector).css(float: position)

Return value: It will return the value of the property for the selected element. 



In the below example, we have created an image element and a button. When the user clicks on the button, the jQuery css() method is called and applies float property on the image to change its position.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the position of 
        background image using jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function() {
            $("#position").on('click', function() {
                $("img").css({
                    float: "left",
                      paddingLeft: "200px"
                });
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            How to change the position of 
            background image using jQuery?
        </h3>
  
        <input type="button" id="position" 
            value="Change Position" 
            style="padding: 5px 10px;">
        <br><br>
  
        <img src=
            alt="jQuery" width="400" height="250">
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!