Skip to content
Related Articles

Related Articles

Improve Article
JQuery | Setting background-image using CSS property
  • Last Updated : 20 May, 2019

To set the background-image using CSS property, We’re using .css() method of jQuery. To understand example first understand the method.

JQuery .css() method:
This method set/return one or more style properties for the specified elements.

Syntax:

  • Return a CSS property:
    $(selector).css("propertyname");
    
  • Set a CSS property:



    $(selector).css("propertyname", "value");
    

Example-1: In this example, background image is set by the background-image property using JQuery’s .css() method.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery |
      Setting background-image using CSS property.
    </title>
    <style>
        #div {
            background-repeat: no-repeat;
            margin-left: 120px;
        }
    </style>
    <script src=
    </script>
  
</head>
  
<body style="text-align: center;">
    <div id="div">
        <h1 style="color: green;">  
                 GeeksForGeeks  
            </h1>
        <p>
            This is text of the div box, .
        </p>
        <br>
        <button>
            click to set
        </button>
    </div>
    <br>
    <br>
    <script>
        $('button').on('click', function() {
            $('#div')
                .css('background-image',
                    'url(' + 
                     + ')'
                );
            $('h1').css('color', 'black');
        });
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: In this example, background image and background-repeat properties are set by the background property using JQuery’s .css() method.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        JQuery 
      | Setting background-image using CSS property.
    </title>
    <style>
        #div {
            margin-left: 120px;
        }
    </style>
    <script src=
    </script>
  
</head>
  
<body style="text-align: center;">
    <div id="div">
        <h1 style="color: green;">  
                GeeksForGeeks  
            </h1>
        <p>
            This is text of the div box, .
        </p>
        <br>
        <button>
            click to set
        </button>
    </div>
    <br>
    <br>
    <script>
        $('button').on('click', function() {
            $('#div')
                .css('background', 'url(' + 
                content / uploads / 20190515121004 / gfgbg1.png '+ '
                    ) no - repeat '
        ); $('h1').css('color', 'black');
        });
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :