This tutorial is created to Set, Get and Delete background image. In this tutorial, You’ll learn to Get, Set and Remove the background image using jQuery.
- Get Background Image
You can use the below code for getting the background image in jQuery with fade out effect.
$("#btn-get").click(function () {
var bg = $('#bg-img').css('background-image');
bg = bg.replace('url(', '').replace(')', '');
alert(bg);
}); - Set Background Image
You can use the below code for setting the background image using the jQuery CSS property with fade in effect.
$("#btn-set-fade").click(function () {
var img = 'http://localhost/BH/assets/images/main/blog-image25.jpg';
$('#bg-img').css('background-image', "url(" + img + ")").fadeIn('slow');
});- Remove Background Image
You can use the below code for removing the background image using the jQuery CSS property.
$("#btn-remove-fade").click(function () {
$('#bg-img').fadeOut('fast', function () {
$('#bg-img').css('background-image', 'none');
});
});- Here’s an Example
You’ll find all the above get , set and remove background image in a div separate JS functions using the jQuery css property.
index.html
<html>
<head>
<title>How to Get, Set and Delete Div Background Image using jQuery | BH</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.container-fluid {
margin: 30px;
}
.btn-group{
margin-bottom:20px;
}
.border-heading{
padding: 10px;
border-radius: 5px;
border: 2px solid saddlebrown;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="btn-group" role="group" aria-label="Basic example">
<button id="btn-get" type="button" class="btn btn-secondary">Get background image</button>
<button id="btn-remove-fade" type="button" class="btn btn-secondary">Remove background image</button>
<button id="btn-set-fade" type="button" class="btn btn-secondary">Set background image</button>
</div>
</div>
<div id="bg-img"style="background-image: url('https://bishrulhaq.com/assets/images/main/blog-image26.jpg'); width: 1395px; height: 573px;">
<p class="text-center border-heading"><b>Hello World! It's BH</b></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script>
<script>
$(function () {
$("#btn-set-fade").click(function () {
var img = 'https://bishrulhaq.com/assets/images/main/blog-image25.jpg';
$('#bg-img').css('background-image', "url(" + img + ")").fadeIn('slow');
});
$("#btn-remove-fade").click(function () {
$('#bg-img').fadeOut('fast', function () {
$('#bg-img').css('background-image', 'none');
});
});
$("#btn-get").click(function () {
var bg = $('#bg-img').css('background-image');
bg = bg.replace('url(', '').replace(')', '');
alert(bg);
});
});
</script>
</body>
</html>Hope this tutorial helped you! Feel free to drop your suggestions and opinions at the comment section below.
