How to Set background Image using jQuery css() Method ? Last Updated : 11 Dec, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns 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 .css() method.. html <!DOCTYPE html> <html> <head> <title> Setting background-image using JQuery CSS property </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> body { text-align: center; } #div { width: 400px; height: 250px; } </style> </head> <body> <div id="div"> <h1>GeeksforGeeks</h1> <p>This is text of div box</p> <br> <button>Click Here</button> </div> <script> $('button').on('click', function () { $('#div').css('background-image', 'url(' + 'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png' + ')' ); }); </script> </body> </html> Output: Example 2: In this example, background image and background-repeat properties are set by the background property using JQuery css() method. html <!DOCTYPE html> <html> <head> <title> Setting background-image using jQuery css() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> body { text-align: center; } #div { width: 500px; height: 350px; } </style> </head> <body> <div id="div"> <h1>GeeksforGeeks</h1> <p>This is text of div box</p> <br> <button>Click Here</button> </div> <script> $('button').on('click', function() { $('#div').css('background', 'url(' + 'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png) no-repeat' ); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to change the position of background image using jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery jQuery-Questions Similar Reads How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below 2 min read How to smoothly transition CSS background images using jQuery? In this article, we will learn to implement a smooth transition of background images using jQuery and CSS. Approach: First, we add a transparent background image using the background-image property in CSS in the style tag. background-image: url(white.jpg); For the transition background image, we use 2 min read How to change the position of background image using jQuery ? 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 cha 2 min read How to get a div's background image with jQuery ? The task is to get a div's background image with jQuery. You can achieve this task by using the CSS() method in jQuery. In simple words, we need to create an empty div and on click event, the empty div will get the image as a background. CSS(): This is an inbuilt method in jQuery to add the CSS prop 2 min read How to set background color for an elements using jQuery ? In this article, we will set the background color for an element using jQuery. To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to che 1 min read How to set the background color of the specified elements using jQuery ? In this article, we will see how to set the background color of specific elements using jQuery.To set the background-color, we use css() method. The css() method in jQuery is used to get or set CSS properties of selected elements. It allows you to retrieve the value of a CSS property or modify it by 2 min read Like