Easy Background Image Slideshow

Need to have a container change a background automatically?

I didn’t know you can not use transitions with background-image on a single container. It will give you lots of troubles on different browsers.
What you can do is use opacity transitions with multiple containers.

HTML

You can modify this to fit your needs. In my case I wanted the images to behave as background, under my content.

SCSS

The basic CSS below. In my demo I’ve added extra CSS to position another container inside it. So I can have the slides as background under the content.

JavaScript

We’ll use jQuery for ease of use.

View Demo

Tags:

10 Responses to “Easy Background Image Slideshow”

  1. CandiAnne June 23, 2017 at 11:58 pm #

    I added your code to my site exactly as you have it yet it’s not working, only the 1st image loads.

    • Rick June 24, 2017 at 9:11 am #

      Unfortunately the code is not as easy as plug and play. Some tweaking might be needed.

      Impossible for me to predict every case 🙂

  2. Himani July 30, 2017 at 8:38 am #

    Can u tell me about path in html……I mean how to set path.

    • Rick July 30, 2017 at 8:50 am #

      I’m not sure what to you mean. Path depends on where you have your images.

  3. Vignesh August 6, 2017 at 1:19 pm #

    I could get the slideshow to work but, the text also shows as part of the slideshow. Like, it has its own slide. Do you have any idea how fix this? Thanks in advance.

    • Rick August 6, 2017 at 1:29 pm #

      Super hard to say without seeing the code.

  4. Werner October 25, 2017 at 8:03 am #

    Works great, thank you.

    Only, the first slide stays longer than all other slides. I guess the JS would need some change. But I don’t know much of it.

  5. Shayne January 4, 2018 at 7:56 pm #

    This works wonderfully! Thanks! I have one question. I am trying to add Forward and Backwards buttons for clicking through the background images. I’m not too good with Jquery, but here is the updated code that I’ve come up with:

    It somewhat works, but not quite the way it should:
    1) The timer doesn’t start over when the button is clicked.
    2) The button clicks only work one time until the next slide is displayed.
    3) If the forward button is clicked when the last image is currently displayed, a blank background will show.

    Any help would be much appreciated!

    Thanks,
    Shayne

    • Shayne January 5, 2018 at 1:21 am #

      Nevermind. I figured it out. It might not be the most elegant way, but it works 🙂

      • Rick January 5, 2018 at 7:35 pm #

        It’s not bad, perhaps you could move into variables the class. In case it ever changes. Also move from ID to CLASS for the forward and backwards selectors.

        Best regards

Leave a Reply

Add <code> Some Code </code> by using this tags.