0

I'm trying to cycle between various background images for a website I'm building. Everything works as intended on Chrome, but on firefox and edge I'm getting some frustrating errors. I coded a small script that changes the background-image of a div element every 8 seconds, but after the first interval the screen goes blank on firefox and edge. When I check the console, it says the browser failed to load the image, yet it points to the correct image.

I've tried using webkits and that didn't work either.

script for changing backgrounds:

var images = [
    'url(../photos/pancake.jpg)',
    'url(../photos/waffles.jpg)',
    'url(../photos/eggs.jpg)',
    'url(../photos/sandwich.jpg)'
]
var counter = 0;

function changeBg() {
    document.querySelector('.bgImg').style.backgroundImage = images[counter];
    counter++;
    if (counter === images.length) {
        counter = 0;
    }
}
setInterval(changeBg, 8000);

CSS:

.bgImg {
    background-image: url(../photos/pancake.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    transition: all 0.8s;
}

firefox console error: enter image description here

yunzen
  • 32,854
  • 11
  • 73
  • 106
Andrew Eyesman
  • 28
  • 7
  • What does your HTML look like when initially loading, without the js interfering? – empiric Aug 19 '19 at 08:13
  • 2
    It seems you are working on your local computer without using a web server (The `file:///` hints me in that direction). This is not recommended, because there are security issues which might prevent your script from working (like loading local images with JS). You should definetely try to install a local webserver. – yunzen Aug 19 '19 at 08:14
  • Are `index.html` and your CSS file in the same folder? The inline style should have the path to the image set to relative to where `index.html` is. – Kaddath Aug 19 '19 at 08:14
  • try removing the quotes. – Gugu Aug 19 '19 at 08:18
  • index.html is in the root folder, while stylesheet is in a separate folder. – Andrew Eyesman Aug 19 '19 at 08:20
  • 1
    Update: I uploaded to a web server and it fixed the problem. Thank you yunzen. – Andrew Eyesman Aug 19 '19 at 08:33
  • linked to your last update: [transition on background-image](https://stackoverflow.com/questions/9483364/css3-background-image-transition) (comment on most upvoted answer states it's not implemented on firefox) – Kaddath Aug 19 '19 at 08:40

1 Answers1

0

Update: I uploaded to a web server and it fixed the problem. Thank you yunzen. – Andrew Eyesman

Nickolay
  • 31,095
  • 13
  • 107
  • 185