Get, Set and Delete Div Background Image jQuery

Get, Set and Delete Div Background Image jQuery

Get, set and remove background from image using jquery; In this tutorial, you will learn how to get a div background image, how to set the div background image and how to div remove background image using jQuery.

Here you will learn step by step how to get, set and remove background image using jQuery with url.

Get Background image

You can use the below code to get the background image in jQuery.

$(".btn-get").click(function() {
    var bg = $('div').css('background-image'); // get background image using css property
    bg = bg.replace('url(','').replace(')','');
    alert(bg);
});   

Set Background Image

You can use the below code to set the background image using the jQuery CSS property.

$(".btn-set").click(function() {

 var img = '//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg';
 var bg = $('div').css('background-image',"url(" + img + ")");
});

Remove Background Image

You can use the below code to remove the background image using the jQuery CSS property.

$(".btn-remove").click(function() {
    var bg = $('div').css('background-image','none');
}); 

Let’s take an Example

Here we will take an example, in this example we will get the div background image, we will set the background image and delete/remove the background image using the jQuery css property

<html>

   <head>

      <title> How to get, set and remove background image attribute example</title>

      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   

      <script>

        $(function() {
            $(".btn-get").click(function() {
                var bg = $('#bg-img').css('background-image');
                bg = bg.replace('url(','').replace(')','');
                alert(bg);
            });            
            $(".btn-remove").click(function() {
                var bg = $('#bg-img').css('background-image','none');
            });            
            $(".btn-set").click(function() {

                var img = '//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg';
                var bg = $('#bg-img').css('background-image',"url(" + img + ")");
            });
        });

      </script>
      <style>
        .card{
            margin: 30px;
        }
     </style>
   </head>

   <body>

    <div class="card">
        <div id="bg-img" style="background-image: url('//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Download-Install-XAMPP-on-Windows.jpeg');  width: 1000px; height: 500px;">
            
        </div>
    </div>


   <button type="type" class="btn-get">Get background image</button>
   <button type="type" class="btn-set">Set background image</button>
   <button type="type" class="btn-remove">Remove background image</button>


   </body>

</html>

Conclusion

In this article, you have learned how to get, set and remove background image using the jQuery CSS property.

You may like

  1. jQuery | Event MouseUp () By Example
  2. Event jQuery Mouseleave By Example
  3. jQuery Event Mouseenter Example
  4. Event jQuery MouseOver() & MouseOut By Example
  5. keyup jquery event example
  6. Jquery Click() Event Method with E.g.
  7. Event jQuery. Blur By Example
  8. jQuery form submit event with example
  9. keydown function jQuery
  10. List of jQuery Events Handling Methods with examples
  11. Jquery Selector by .class | name | #id | Elements
  12. How to Get the Current Page URL in jQuery
  13. jQuery Ajax Get() Method Example
  14. get radio button checked value jquery by id, name, class
  15. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  16. jQuery Get Data Text, Id, Attribute Value By Example
  17. Set data attribute value jquery
  18. select multiple class in jquery
  19. How to Remove Attribute Of Html Elements In jQuery
  20. How to Checked Unchecked Checkbox Using jQuery
  21. jQuery removeClass & addClass On Button Click By E.g.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *