How to change HTML background with JavaScript Function? I need some simple function to change background from one image to another?
Add a comment
|
6 Answers
Try something like this:
function newBackGround (element,background) {
element.style.backgroundImage = "url("+background+")";
}
newBackground (myElement,"newBackground.jpg");
Comments
An alternative IFF using jquery
$("body").css("background-image", "url(/image.jpg)");
2 Comments
Marcos Placona
I think it's overkill to import an entire library (jQuery) only for this
David
That is correct HENCE why I put IFF (if and only if, AND in bold) jquery is being used!!
Very simple like this:
function changeBGImage(){
document.body.background = "image.jpg";
}
UPDATE
Or if you wanna use CSS (more elegant solution) with it, you could use:
<style>
.bg1 {
background-image: url(images/my_image.jpg);
}
</style>
<body id="page_body">
<script>
function changeBGImage(whichImage){
document.getElementById('page_body').className="bg"+whichImage;
}
</script>
1 Comment
Pointy
Well, for one thing "background" isn't a property of the
<body> DOM object, at least not in all browsers. The CSS answer should work however and it's really the right way to do it anyway.demo codes:
element = document.querySelector("body");
element.style.backgroundImage = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
elements = document.querySelectorAll("div");
for(let element of elements){
element.style.background = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
}reference links:
http://www.w3schools.com/jsref/dom_obj_style.asp http://www.w3schools.com/jsref/prop_style_background.asp http://www.w3schools.com/jsref/prop_html_style.asp http://www.w3schools.com/jsref/met_document_queryselectorall.asp http://www.w3schools.com/jsref/met_document_queryselector.asp https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Comments
function changeBGImage(whichImage){
document.body.style.backgroundImage = "url(" + whichImage + ")";
}
1 Comment
Christian C. Salvadó
@Pointy, he missed the
style property, it should be document.body.style.backgroundImage = "url(" + whichImage + ")";All of these answers change the body. The most direct way to change the html background is like so:
const imagePath = "/img/sub-folder/my-image.png";
document.documentElement.style.background = `url("${imagePath}")`;
