Updated April 18, 2023
Introduction to jQuery background image
The jQuery background image property is used to sets or returns the background image of an element. The jQuery background image property is a built-in property in jQuery for the HTML element. The jQuery background image property value can be set or get by using the css() function and the url() function. The background image property can also be used for the background color.
Syntax –
The syntax to return the background image of an element –
$("selector").css("background-image");The syntax to set the background image of an element –
$( "selector" ).css( {"background-image" : "url( image )"} );where –
css() – The css() function used to sets or gets one or more property of the selected element.
url() – The url() function is used to specify the location of the image for the background.
Return value –
The return value of this property is the string that specifies the background image.
Working on JQuery background image property
The background image property sets or returns the background image for any element. Suppose we have to set a logo image of the company as the background image on the HTML page. So we can use the background image property as “$( “body” ).css( {“background-image” : “url(logo.jpg)”} );”, where css() function sets or returns background image property and url() function gives the location of the image, so as a result the logo will be set as a background image.
Examples for the jQuery background image property
Here are the following examples mention below
Example #1
Example of jQuery background image property to set the background image for div element –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery background image property </title>
<style>
#p1 {
border : 2px solid black;
background-color : yellow;
height : 250px;
width : 250px;
}
</style>
</head>
<script>
$( document ).ready( function() {
$( "button" ).click( function() {
$( "#p1" ).css( {"background-image" : "url(educba.jpg)"} );
});
});
</script>
<body>
<h3> This is an example of changing the background image using background image property: </h3>
<div id = "p1"> </div>
<br>
<button> Click the button to change the background image of above span element. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the div element is used with some style property as yellow color applied to it. Next the background image property is used to set the background image of the div element as “$( “#p1” ).css( {“background-image” : “url(educba.jpg)”} );”, by using its id. As a result the background image of the div element change by image, as we can see in the above output.
Example #2
Example of background image property to get the background image of the body element –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery background image property </title>
<style>
#p1 {
background-image : url("educba.jpg");
height : 600px;
width : 600px;
}
</style>
</head>
<script>
$( document ).ready( function() {
$( "button" ).click( function() {
alert($("#p1").css( "background-image" ));
});
});
</script>
<body id = "p1" >
<h3 style = "color : white" > This is an example of changing the background image using background image property: </h3>
<br>
<button> Click the button to get the background image. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the background image is applied to the body element. Next the background image property is used to get the background image of the body element as “alert( $(“#p1”).css( “background-image” ) );”, by using body element id. The return value of the background image property is a string that is the location of the file, as we can see in the above output.
Example #3
Example of background image property to directly modify the backgroundImage CSS property –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery background image property </title>
<style>
#p1 {
border : 2px solid black;
background-color : blue;
height : 250px;
width : 250px;
}
</style>
</head>
<script>
$( document ).ready( function() {
$( "button" ).click( function() {
document.getElementById( "p1" ).style.backgroundImage = "url( 'educba.jpg' )";
document.getElementById( "p1" ).style.width = "600px";
document.getElementById( "p1" ).style.height = "500px";
});
});
</script>
<body>
<h3 > This is an example of changing the background image using background image property: </h3>
<div id = "p1" > </div>
<br>
<button style = "color : blue" > Click the button to change the background image of div element. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the div element is used with some style property as blue color applied to it. Next, the background image property is directly used to set the background image as the CSS property of the div element as a code “document.getElementById( “p1” ).style.backgroundImage = “url(‘educba.jpg’)”;”, by using div id. As a result the background image of the div element change, as we can see in the above output.
Conclusion
The background image property is a predefined property, which is used to sets or gets the background image of an element.
Recommended Articles
This is a guide to jQuery background image. Here we discuss the Working on JQuery background image property along with the examples and outputs. You may also have a look at the following articles to learn more –
