JQuery | Setting background-image using CSS property

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

Recommended Posts: