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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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(' + 
'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png'
                     + ')'
                );
            $('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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </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(' + 
'https://media.geeksforgeeks.org/wp- 
                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

Related Articles