Changing background image with a button

Discussion in 'JavaScript' started by Tintumol, Dec 25, 2010.

0
  1. #1
    I am trying to make a button that would change the background image of the whole document whenever somebody clicks it.

    I have tried something along the lines of this:

    and,
    as you can see, I am a beginner at coding in general so any help is appreciated.

    My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.
     
    Tintumol, Dec 25, 2010 IP
  2. tvoodoo

    tvoodoo Active Member

    Messages:
    239
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Try this :
    
<script>
function change(bg) {
document.body.style.backgroundImage = bg;
document.body.style.backgroundPosition = "top center";
document.body.style.backgroundRepeat = "no-repeat";
}
</script>
<input type="button" value="Pattern1" onClick="change('background.png') />";
    HTML:
     
    tvoodoo, Dec 25, 2010 IP
  3. ~Maria~

    ~Maria~ Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Where have to put this code in HTML?
     
    ~Maria~, Dec 27, 2010 IP
  4. tvoodoo

    tvoodoo Active Member

    Messages:
    239
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    53
    #4
    before the tag </head> the <script></script> and the input between <body></body>
     
    tvoodoo, Dec 27, 2010 IP