CSS()
MethodTo 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>
.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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
How to populate dropdown list with array values in PHP
Use the PHP foreach loop Yo...How to Reset a Form Using jQuery or JavaScript
Use the reset() Method You can simply...How to get current page URL in PHP
Use the PHP $_SERVER Superglob...How to remove white spaces from a string in jQuery
Use the jQuery $.trim() function You...How to get One Day Old Records in Laravel using Carbon?
In this article, I will share with you h...