How to Set CSS background-image Property Using jQuery
In this tutorial, we are going to see how to set CSS background-image property using jQuery. To change the background-image attribute of CSS in jQuery, use the method css() of jQuery, and then you can use the background-image attribute to add the background image.
HTML Code:
<!DOCTYPE html> <html> <head> <title>Set CSS background-image Property Using jQuerye</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> // Put the jQuery code Her. </script> <style type="text/css"> /* Put the CSS Style Here */ </style> </head> <body> <div class="image"></div> <p><button type="button" id="btn">Set the background image</button></p> </body> </html>
CSS Code:
.image {
width: 600px;
height: 400px;
border: 4px dashed #000;
}
jQuery Code:
$(document).ready(function() {
$("#btn").click(function() {
var url = "https://1.bp.blogspot.com/-rWHdFvjsDwA/XSJO7HQBxxI/AAAAAAAAFFA/_pIqqdkq4lMyZnxmjKrsxrVb9sepx-X6ACLcBGAs/s1600/sea.jpg";
$(".image").css("background-image", "url(" + url + ")");
});
});
| Result |
|---|
- jQuery MCQs – Multiple Choice Questions and Answers – Part 1
- jQuery MCQs – Multiple Choice Questions and Answers – Part 2
- How to detect a click on iframe in JQuery
- How to find sub-string between the two words using jQuery
- How to Get Substring from a String Using jQuery
- How to remove all spaces from a string with jQuery
- How to count number of characters in a string with JQuery
- How to count words using JQuery
- How to loop through array with jQuery.each()?
- How to show/hide DIV based on Radio Button click
- How to show/hide DIV if checkbox selected
- How to show/hide DIV on selection of ANY drop-down value?
- How to define a function in jQuery?
- How to Call a Function After Some Time in jQuery
- How to add CSS properties to an element dynamically with jQuery
- How to add attribute to an HTML element in jQuery
- How to Remove Attributes from HTML Element in jQuery
- How to add DOM element in jQuery
- How to Remove Elements from DOM in jQuery
- How to disable href link in jQuery
- How to check if a checkbox is checked with jQuery
- How to get the value of selected radio button with jQuery
- How to get the value of a CheckBox with jQuery
- How to bind onclick event to dynamically added HTML element with jQuery
- How to get the value of a select with jQuery
- How to get the current URL using Jquery
- How to remove a tag without deleting its content with jQuery
- How to get the text content of an element with jQuery
- How to check if an element is visible with jQuery
- How to find mouse position relative to element with jQuery
- How to find mouse position relative to the document with jQuery
- Show read more link if the text exceeds a certain length with jQuery
- jQuery slideup() slidedown() and slidetoggle() Example
- How to slide toggle a DIV from Left to Right?
- How to disable/enable submit button in jQuery
- How to disable all <input> inside a form with jQuery?
- How to check and uncheck a radio button using jQuery
- How to check and uncheck a checkbox with a button using jQuery
- How to move an element with arrow keys in jQuery
- How to get selected file name from Input Type File using jQuery
- How to check if an element is hidden in jQuery
- How to Redirect to Another Web Page Using jQuery and JavaScript
- How to insert HTML content into an iFrame with jQuery
- Auto-update DIV content while typing in textarea with jQuery
- How to Add or Remove Table Rows Dynamically with jQuery
- How to change the href for a hyperlink with jQuery
- How to refresh a page with jQuery
- How to Get Number of Elements inside a DIV with jQuery
- How to Check If a Value is Numeric or Not in jQuery
- How to detect pressing Enter on keyboard using jQuery
- How to detect the Enter key in a text input field using jQuery
- How to get the value of a textarea in jQuery
- How to reset a form using jQuery
- How to check if the input is empty with jQuery
- How to display the value of the input in DIV in real-time with jQuery
- How to detect a click outside an element with jQuery
- How to Loop Through Elements with the Same Class in jQuery
- How to change the text of a button in jQuery
- How to Change the Value of an Input in jQuery
- How To Change CSS Style With jQuery
- How to Get the Value in an Input Text Box using jQuery
- How to Set CSS background-image Property Using jQuery
- How to Detect a Mobile Device in jQuery
- How to Get the data-id Attribute of an Element In jQuery
- How to Add <li> in an Existing <ul> with jQuery
- Get data from a database without refreshing the browser using Ajax
- Submit Form Without Page Refresh Using Ajax, jQuery, and PHP
- How to show/hide a div with a slide effect in jQuery
- How to get URL parameters using jQuery
- How to get form data with JQuery
- Submit a Form Using Jquery Ajax
- Scroll to the top of the page using jQuery
- Triggering a CSS animation with Jquery
