Open In App

How to change the position of background image using jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. 

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 the float property on the image to change its position.

Example: In this example, we will change the position of the background image using jQuery.

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:



Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads