CODEWITHSUNDEEP
css
Michael Cabus
Michael Cabus

Reputation: 121

CSS transition from background color to background image

I am having a page transition from a background-color to a background-image. I have tried a variety of options...but it seems when the page transitions to the background image, it needs some background-color, and sets background-color:transparent..and the image never shows. Here is my CSS:

@keyframes backgroundintro {
    0% {
      background:#000000;   

    }

     25% {
        background:#0c2336;
     }

     100% {


     background:  linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ), url('../IMG/background.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   /*isolation: isolate;
   mix-blend-mode: color-burn;*/

     }


 }


body {



   animation-duration: 43.90s;
    transition-timing-function: ease-in;

    animation-name:backgroundintro;





}

I'm blending a background-color and the background-image..so using a gradient.

Fiddle here: https://jsfiddle.net/7god9hoL/

Upvotes: 0

Views: 1333

Answers (1)

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7211

The trick really is to make a background image transparent. This can be achieved by using pseudo-element (e.g. :before) which covers your main element (hence the absolute positioninig and top, left, bottom, right set to 0). Then the as an animation you just change the opacity of this pseudo-element. Here's a simple example:

(after running the snippet hover the square)

div {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  z-index: 1;
}
div:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
  opacity: 0;
  transition: all 1s;
}
div:hover:before {
  opacity: 1;
}
<div></div>

Upvotes: 2

Related Questions