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
Post a Comment