How to change HTML background with JavaScript Function?

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>

An alternative IFF using jquery

$("body").css("background-image", "url(/image.jpg)");

Try something like this:

function newBackGround (element,background) {
   element.style.backgroundImage = "url("+background+")";
}

newBackground (myElement,"newBackground.jpg");

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

Tags:

Javascript

Html

Image

Background

Recent Posts