5

I have a div where I'm changing the background (using jQuery). These CSS3 rules allow the new background image to crossfade in nicely

transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

The issue is that the background size is also transitioning.

So if it switches from a portrait to a landscape background image, for example, while fading, the image gets squished vertically and then stretched horizontally. This can be a bit nauseating.

Is there any way to use background-size: cover but to only fade transition the background image itself without the background size?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
andrewtweber
  • 24,520
  • 22
  • 88
  • 110

2 Answers2

2

I worked around the unintended size animation by:

  1. having two divs, absolutely positioned on top of each other

  2. cycling their opacity (eg one to 0, and the other to 1)

  3. putting the css transition on the opacity, rather than background-image.

This achieves a cross-fade between the background images of the divs. If you have more than 2 images to cycle, either use more divs, or change the background-image of the one you are setting the opacity to 1.

Jon N
  • 1,439
  • 1
  • 18
  • 29
1

That's just... weird. background-image isn't supposed to be animatable in the first place. On the other hand, background-size can be animated, but it's very clear from your CSS that you don't want to transition background-size. Yet, your browser chooses to animate it along with the image anyway.

Whatever your browser is doing, it's obviously ignoring the spec and just doing its own thing. Since background-image isn't animatable using CSS (I know Firefox and IE don't support it), and your background transition is already being handled with jQuery anyway, I suggest using jQuery instead of CSS to implement the crossfade to ensure it'll work consistently across browsers.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • It's on Chrome 36.0.1985 on Windows. Is it just me or is Chrome doing exactly what IE did (introducing incompatible quirks that only their browser supports) but getting away with it this time? – andrewtweber Aug 19 '14 at 14:52
  • 1
    @andrewtweber: [Not just you.](http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character#comment36270875_23569898) ;) – BoltClock Aug 19 '14 at 14:52
  • 2
    And now in 2021, Firefox supports animating `background-image` and doesn't suffer from the image stretching during the crossfade like Chrome still does. – Corey Jan 29 '21 at 22:34