CODEWITHSUNDEEP
htmlcssimagebackground
t3cho
t3cho

Reputation: 375

Change HTML background image on click

How to change background image on click i have this code

html { 
  background: url(img01.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

i have 5 div's with . 4of them are hidden . When i click on button it show's me next div and hide previous . When it show me the next div i want also to show new background image under div. How to do that :( 

<div id='2' style="display: none;">
    <input type='button' div_funkcija(2);" value="Sehr-Gut">
    <input type='button' div_funkcija(2);" value="Gut">     
    <input type='button' div_funkcija(2);" value="Befriedigend">
    <input type='button' div_funkcija(2);" value="Ausreichend">
    <input type='button' div_funkcija(2);" value="Mangelhaft">
</div>

And the script is 

function div_funkcija($div) {
    document.getElementById($div).style.display='none';
    document.getElementById($div+1).style.display='block';
}

Now when it open's the new div how to show on body or html background the new image.

Upvotes: 0

Views: 3737

Answers (2)

t3cho
t3cho

Reputation: 375

The code which helped

<input type='button' Onclick="document.body.style.cssText+=';background-image: url(Cistoca.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;'" />

Upvotes: 0

Adam Matthews
Adam Matthews

Reputation: 201

function div_funkcija($div)
        {
            document.getElementById($div).style.display='none';
            document.getElementById($div+1).style.display='block';
            document.getElementsByTagName('html')[0].style.backgroundImage='url(newImage.jpg) no-repeat center center fixed';
        }

Or you can give the html tag an ID and use document.getElementById. Just an additoinal suggestion, I don't usually style the html tag, usually I reference the body.

Upvotes: 2

Related Questions