title: Switching background image smoothly - Angular
body: <p>I am facing problem concerning switching background in Angular 10. I managed to implement switching background image but I would like it to be smooth.
  At this moment it looks kind of like the slideshow - one image disappears and the other one appears.</p>
  <p>My piece of code looks like this:
  In typescript component I hold array of variables with urls to image.</p>
  <pre><code>backgroundImages = ['url(/assets/img/background.jpg)', 'url(/assets/img/background2.jpg)']
  </code></pre>
  <p>And in constructor I call refresh method which basically changes the value of variable holding reference to current background</p>
  <pre><code>refreshBackground(backgroundNumber: number) {
      this.background = this.backgroundImages[backgroundNumber]
      if (backgroundNumber == this.backgroundImages.length - 1)
        backgroundNumber = 0
      else
        backgroundNumber++
      setTimeout(() =&gt; this.refreshBackground(backgroundNumber), 10000)
    }
  </code></pre>
  <p>In html this variable is set to style.background</p>
  <pre><code>&lt;div class=&quot;container background&quot; [style.background]=&quot;background&quot;&gt;
  </code></pre>
  <p>I would appreciate any help and tips and if more details are needed, ask freely.</p>
  <p>Michael</p>