WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Set CSS background-image Property Using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery CSS() Method

To set the CSS background-image property of an element using the jQuery CSS() method, you need to specify the complete property value using the url() functional notation.

For example, if you've an image URL stored in a JavaScript variable then in CSS() method you need to set the value something like this to make it work:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery Setting background-image CSS Property</title>
  • <style type="text/css">
  •     .box{
  •         width: 500px;
  •         height: 300px;
  •         border: 5px solid #333;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     // Set background image of a div on click of the button
  •     $("button").click(function(){
  •         var imageUrl = "images/sky.jpg";
  •         $(".box").css("background-image", "url(" + imageUrl + ")");
  •     });    
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="box"></div>
  •     <p><button type="button">Set Background Image</button></p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.