javascriptjquerycsstoggleclass

How do you toggle background:url's?

I'm using Todd Moto's flaunt.js for navigation and want to toggle the hamburger image with another image, and back again, when the mobile-menu is revealed and closed.

The demo is here:

https://toddmotto.com/labs/flaunt-js

The tutorial is here:

https://toddmotto.com/flaunt-js-for-stylish-responsive-navigations-with-nested-click-to-reveal

Solution

  • Yes, there are plenty of ways to change the CSS background image. You can set it directly.

    Example:

    HTML: <div id='my-box'></div> CSS:

    #my-box {
    height: 518px;
    width: 800px;
}

    JS: 

    document.querySelector('#my-box').style.backgroundImage =
    'url(' +
    'https://www.thebigduck.us/content/themes/big-duck/dist/images/dp03_v2.jpg' +
    ')';

    Fiddle: https://jsfiddle.net/jmz20uhy/