StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POwhy my background-image transition is not working in firefox
text
Body
copied!<p>I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and firefox.</p> <p>Html</p> <pre><code><body> <header> </header> </body> </code></pre> <p>Css</p> <pre><code>body { margin: 0; } header { height: 665px; width: 100%; background-image: url('image0.jpg'); -moz-transition: background-image 1s ease-in-out; -webkit-transition: background-image 1s ease-in-out; -ms-transition: background-image 1s ease-in-out; -o-transition: background-image 1s ease-in-out; } </code></pre> <p>Jquery</p> <pre><code> function preloadImages(array) { if (!preloadImages.list) { preloadImages.list = []; } for (var i = 0; i < array.length; i++) { var img = new Image(); img.src = array[i]; preloadImages.list.push(img); } } var imageURLs = [ "image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg" ]; preloadImages(imageURLs); var counterForBackgroundImage = -1; function changeBackgroundImage() { counterForBackgroundImage++; if (counterForBackgroundImage > imageURLs.length-1) counterForBackgroundImage = 0; $('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')'); setTimeout(function() { changeBackgroundImage(); }, 5000); } changeBackgroundImage(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload