Toggle Background Image HTML

Question

I have a simple question, I need to make a switch/button in which the user clicks it to toggle the background image to on or off

Here's the code:

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

And here's the CSS for it:

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

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jul 22 '15 at 14:03
possible duplicate of [Switching a DIV background image with jQuery](http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery) — Zakaria Acharki, Jul 22 '15 at 14:10

Satwik Nadkarny · Answer 1 · 2015-07-22T14:53:54.403

3

Well, you can do this using jQuery or javaScript. The basic idea would be to toggle the class of the body tag. See an 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 this 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>

edited Jul 22 '15 at 14:53

answered Jul 22 '15 at 14:00

Satwik Nadkarny

5,086
2
23
41

Thank you so much, I knew it was simple to do with jQuery but I somewhat forgot about jQuery codes. Nonetheless thanks a lot! – Sami Nofal Jul 22 '15 at 14:25
@SamiNofal Glad to help Sami! :) – Satwik Nadkarny Jul 22 '15 at 14:30
@SamiNofal If this answer helped you, then please mark it as the answer so that it will help others in the future who stumble upon this question!!! – Satwik Nadkarny Jul 22 '15 at 14:32
Non-jQuery solution: `document.body.classList.toggle('BgClass');`. [`classList`](https://developer.mozilla.org/en_US/docs/Web/API/Element/classList) is supported in IE10+. – Sebastian Simon Jul 22 '15 at 14:37
@Xufox Thanks!! I have added the JavaScript solution to the answer!!! – Satwik Nadkarny Jul 22 '15 at 14:54

score 0 · Answer 2 · answered Jul 22 '15 at 13:56

This is a pretty simple thing to achieve using jQuery.

You can see my example here: http://jsfiddle.net/qwnLj4tj/

With jQuery I am toggling a style class on the body when the button is clicked:

$('.my-button').click(function() {
    $('body').toggleClass('active-class');
    return false;
});

And with css I am just applying the styles for the toggleClass:

body.active-class {
    background: url('URL/TO/BGIMAGE.EXT');
}

Toggle Background Image HTML

2 Answers2