Style backgroundImage Property
The backgroundImage property sets or returns the background image of an element.
Tip: In addition to the background-image you should also specify a background-color. The background-color will be used if the image is unavailable.
See Also:
Syntax
Return the backgroundImage property:
Set the backgroundImage property:
Property Values
| Value | Description |
|---|---|
| url(‘URL’) | The location of the image file |
| none | No background image. This is default |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A String, representing the background image |
| CSS Version | CSS1 |
Browser Support
backgroundImage is a CSS1 (1996) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
More Examples
Example
Set a background image of a specific <div> element:
Example
Return the background image of a specific <div> element:
Example
Return the background image of a document:
COLOR PICKER
Get certified
by completing
a course today!
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Как поменять background image в js
The DOM Style backgroundImage Property is used to set or return the background image of an element.
Syntax:
- To get the backgroundImage property
- To set the backgroundImage property
Return Values: It returns a String, represents the background image.
Property Values:
- image: This sets the property to use the image specified. The image path may be specified in the url() function.
- none: This sets the property to use no background image.
- initial: This is used to set this property to its default value.
- inherit: This is used to inherit the property from its parent.
image: This sets the property to use the image specified. The image path may be specified in the url() function.
how to change the background image of div using javascript?
//Here is an example how to change background image of element using javascript by feching a new URL form some API.
// let image teched from API: this is the image you want to put as new background !
//the HTML element whose background needs to be changes is given an id of #thumbnail.
//using a function which will update data in the HTML — this is done
//after parsing of the data fetched, I have omitted the steps used for parsing the data.
JavaScript: change a webpage background image tutorial
When you want to change a webpage background image using JavaScript, you can do so by setting the background image of the document object model (DOM) property.
The property you need to manipulate for changing the background image of the whole page is document.body.style.backgroundImage :
You need to put the relative path to the image from your web page’s folder. If the image is located in the same folder, then you can reference it directly inside the url() function as in the code above.
When the image is one folder down, add the correct relative path as follows:
Or go up one folder with the following relative path:
If you have the image URL available publicly on the internet, you can pass the full url into the property as in the following example:
The code above will change the background image into an image that I have created for my website. You can test the code out by changing the image of Google’s homepage. First, open your browser’s developer console. Then in the Console tab next to Elements tab, write the following code:
The background image of Google’s homepage will change to the specified image, just like in the screenshot below:
By default, the image you selected as a background will be repeated to cover the whole page. You may want to style the background image further by setting the background-repeat style to "no-repeat" and the background-size style to "cover" .
To add the extra styles using JavaScript, you need to set the style property, which contains the same styling property but with a camelCase instead of kebab-case . For example, background-repeat becomes backgroundRepeat :
Inside your web application, you may want to trigger the background image change when the visitors do something. For example, you can change the background image when a <button> is clicked:
Or you can also immediately change the background image after the page is loaded by listening to the DOMContentLoaded event as follows:
The DOMContentLoaded event is triggered when your whole HTML page has been loaded, even though some external JavaScript, CSS, and image resources are not yet fully loaded.
If you want to wait until the page and the resources are fully loaded, you can listen for the load event instead:
Changing the background image of a specific element
The document.body code means you are selecting the <body> tag of your HTML page. You can also change only a part of your page by selecting only that specific element.
The browser provides you with several ways to select a specific element:
- getElementById() — get a single element with matching id attribute
- getElementsByClassName() — get elements with matching class attribute
- getElementsByName() — get elements with matching name attribute
- getElementsByTagName() — get elements with matching tag name like "li" for <li> , "body" for <body>
The most recommended approach is to use getElementById() because it’s the most specific of these methods. Out of the four methods, only getElementById() will retrieve a single element.
The following example shows how you can change the background of <div> element with id="user" attribute:
Finally, you can put the bgImage as a parameter to the changeBackgroundImage() function so that you can have buttons that change the background to different images:
And that’s how you change the background image of a webpage using JavaScript ��
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Search
Type the keyword below and hit enter
report this ad
Click to see all tutorials tagged with:
report this ad
report this ad