background gif on javascript to change css

Question

I'm trying to change the CSS of my website by the user clicking a div and when they do the website's background will turn into a gif, but I don't know how to do that on JavaScript!

here's my code

 function easterFun(){
     var changeBG = document.getElementById("body");
     changeEaster.setAttribute("style","background-image:url(eatser.gif)")

also my div wont do anything when it is clicked. it wont execute this code can someone tell me the problem pls?? Welcome to the Holiday Spirit website!!!

<div  id="easter"onclick="easterFun" style = "cursor: pointer"()>Easter!</div>
<div id = "xmas" onclick ="xmasFun()">Christmas</div>



</body>
</html>

Well you have an issue where your variables do not match `changeBG` and `changeEaster` — epascarello, Nov 12 '14 at 17:38
http://stackoverflow.com/questions/10867503/change-background-image-in-body — epascarello, Nov 12 '14 at 17:41

score 2 · Accepted Answer · answered Nov 12 '14 at 17:40

Use style.cssText or style.backgroundImage

Example:

function easterFun(){
     var changeBG = document.getElementById("body");
     changeBG.style.cssText = "background-image: url(eatser.gif)";
}

Or:

function easterFun(){
     var changeBG = document.getElementById("body");
     changeBG.style.backgroundImage = "url(eatser.gif)";
}

Note:

document.getElementById capture only elements with ID (eg. <div id="body">)

For get "body element" use: document.body (or document.getElementsTagName("body")[0]), eg.:

function easterFun(){
     var changeBG = document.body;
     changeBG.style.backgroundImage = "url(eatser.gif)";
}

score 0 · Answer 2 · answered Nov 12 '14 at 17:38

0

Please try this

changeEaster.style.backgroundImage = "url(eatser.gif)";

answered Nov 12 '14 at 17:38

Ashish Mehta

7,226
4
25
52

score 0 · Answer 3 · answered Nov 12 '14 at 17:41

You're very close. You need to change getElementById to getElementsByTagName and match your variables:

function easterFun(){
     document.getElementsByTagName("body")[0].setAttribute("style","background-image:url(eatser.gif)");
}

getElementsByTagName returns an array of objects, which is why after the function call, we access [0].

In the above, I have also removed the variable declaration for brevity.

background gif on javascript to change css

3 Answers3