CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground-image
asdasd
asdasd

Reputation: 1

Easy Toggleable Background

How do I create a check-box that toggles my website's background on and off? Basically, when I toggle a check-box I want it to locate an image and display it as a background. When I uncheck the check-box, I want it to disregard (or something that would achieve the same effect) the code that is setting the background.

Note: I have researched this topic on both Stackoverflow and Google, and while I found a few helpful articles, I did not find something that allowed me to achieve the effect I want.

Upvotes: 0

Views: 44

Answers (1)

Stickers
Stickers

Reputation: 78686

You could do it with jQuery change and toggleclass functions.

$(function() {
    $('#checkbox').change(function(){
        $('body').toggleClass('toogle-bg'); 
    });
});
.toogle-bg {
    background: url("http://goo.gl/Yu3rXz") 0 0 no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input id="checkbox" type="checkbox"/> checkbox</label>

Upvotes: 1

Related Questions