1

I'm developing a site that has multiple high resolution images that are used as the content div background image. Every 7 seconds I call a function to set the background image which uses the below code.

document.getElementById('main_content_div').style.background = 'linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)),url('+url+')';

The CSS for main_content_div states there should be a transition but it's not occurring.

position:relative;  
height:1080px;
background-color:#000;  
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)),url('/img/background/bg8.jpg'); 
background-size:cover;
transition: background-image 3s ease-in-out;

Every time the background updates I get no transition and some times I can see the gradient appear before the image appears which looks really bad.

If I take the linear gradient out the background image does transition nicely but I need the gradient overlay to make the text over the background images readable.

I've tried every rendition I can google for, using before and after selectors, using jquery animate option, I've had no luck. Please tell me how I should be accomplishing this.

Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
Larry Dougherty
  • 95
  • 1
  • 3
  • 10
  • 1
    the first issue is image loading, so you won't see transition because the image is still loading and since it's a High resolution, it will then take time. – Temani Afif Aug 19 '18 at 19:14
  • It sounds like you already looked at other solutions. Could you elaborate what exactly did not work for you? I found [this](https://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery) and [this](https://stackoverflow.com/questions/5002351/how-to-fade-changing-background-image) question that to me seem to ask something very similar. What is different in your case? Why did the answers given there not work for you? – luke-codewalker Aug 19 '18 at 22:28
  • Also, is it absolutely necessary for you to use `background-image`? There seem to be cross-browser differences when trying to animate it (https://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations). Also if you look at [background-image on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) it says "Animation type: discrete" so I would not expect it to give you a smooth animation/transition – luke-codewalker Aug 19 '18 at 22:35

0 Answers0