0

So, this is the CSS

html {
background: url(Images/1.jpg);
background-position: center;
background-size: cover;
-webkit-transition: background 1s ease;
-moz-transition: background 1.5s ease;
transition: background 1s ease;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);

}

I have jQuery code that, every time you press space, the background: url(x/x.jpg) changes.

It works perfectly on google chrome, but, once in firefox it changes abruptly. The default value is set as you can see and the -moz prefix is clearly there.

I've scoured through SO but I'm only seeing answers saying to include a default value.

Misha Verbel
  • 9
  • 1
  • This has already been discussed on SO, for example http://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery and http://stackoverflow.com/questions/9483364/css3-background-image-transition – Johann Kratzik Nov 30 '16 at 15:30

1 Answers1

2

background-image is not an animatable property. It may be supported in Chrome, but it's non-compliant and not guaranteed to work in all browsers. You may need to look into a JavaScript-based image slideshow plugin.

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42