javascript - Toggle Background Image HTML -


i have simple question, need make switch/button in user clicks toggle background image on or off

here's code:

body style = "background-image: url('websitebg.jpg')" 

and here's css it:

<style>   body{     background-size: cover;      background-repeat: no-repeat;       background-attachment: fixed    } </style> 

well, can using jquery or javascript. basic idea toggle class of body tag. see example below :

javascript solution :

html:

<body>     <div style="color:red;">some random text here</div>     <input type="button" id="btnback" value="toggle background" /> </body> 

css:

body {     background-size: cover;      background-repeat: no-repeat;       background-attachment: fixed    }  .bgclass {     background-image: url('http://freedomwallpaper.com/wallpaper2/funky-wallpaper-hd.jpg'); } 

javascript

var btnback = document.getelementbyid('btnback'); btnback.addeventlistener('click',function() {     document.body.classlist.toggle('bgclass'); }); 

you can see here -> http://jsfiddle.net/qagdvft6/

jquery solution

$('#btnback').click(function() {      $('body').toggleclass('bgclass');  });
body{      background-size: cover;       background-repeat: no-repeat;        background-attachment: fixed     }    .bgclass {      background-image: url('http://freedomwallpaper.com/wallpaper2/funky-wallpaper-hd.jpg');  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <body>      <div style="color:red;">some random text here</div>      <input type="button" id="btnback" value="toggle background">  </body>


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -