Fade Background Images with CSS3

CSS fade-in background image

You would like to probably use opacity and fade-in effect.

div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}

div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

See the jsfidle if it's what you wanted.

Fade image to transparent like a gradient

If you want this:

Sample Image

You can do this:

<html>  <style type='text/css'>    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }    img {      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));    }  </style>  <body>    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>    <img src='https://i.imgur.com/sLa5gg2.jpg' />  </body></html>

CSS Fade-In/Out Background Images Showing Blank Last Image

I'm assuming it's your timings.

The animation lasts for 30s and for 75% of that time, the image is opacity: 0 with no transitions. That means that after 19.5s (25% + 12s delay for figure:nth-child(3)), there's nothing visible for the next 10.5s until the animation starts again for figure:nth-child(1).

Changing it so all values are thirds should tidy things up (i.e. 66% of the time has opacity: 0 and updating the delays to be 10s or the duration to be 18s). Alternatively, you could have 4 figures and change the delays to multiples of 7.5.

Full background image with fade effect

To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a @keyframes rule of their own.

For "n" images you must define:

a=presentation time for one image

b=duration for cross fading

Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%

a/t*100%

(a+b)/t*100% = 1/n*100%

100%-(b/t*100%)

100%

Src: http://css3.bradshawenterprises.com/cfimg/

.crossfade > div {  animation: imageAnimation 8s linear infinite;  backface-visibility: hidden;  background-size: cover;  background-position: center center;  color: transparent;  height: 100%;  left: 0;  position: fixed;  top: 0;  width: 100%;}.crossfade {  height: 500px;}@keyframes imageAnimation {  0% {    opacity:1;  }  17% {    opacity:1;  }  25% {    opacity:0;  }  92% {    opacity:0;  }  100% {    opacity:1;  }}
.crossfade div:nth-of-type(1) {  background-image: url(http://placehold.it/200/f00);  animation-delay: 6s;}.crossfade div:nth-of-type(2) {  background-image: url(http://placehold.it/200/0b0);  animation-delay: 4s;}.crossfade div:nth-of-type(3) {  background-image: url(http://placehold.it/200/00f);  animation-delay: 2s;}.crossfade div:nth-of-type(4) {  background-image: url(http://placehold.it/200/ff0);  animation-delay: 0;}

<div class="crossfade">  <div></div>  <div></div>  <div></div>  <div></div></div>

Crossfade Multiple Background Images Using CSS Only - Single Page Design

I believe this is what you want. I'm not sure what browser you're using but if it's a webkit browser like chrome be sure to use the -webkit- prefix on your css animations:

HTML

<div id="home" class="panel">
    <div class="inner">
        <div id="backgroundchange">
            <div class="backgroundimg" id="back1"></div>
            <div class="backgroundimg" id="back2"></div>
            <div class="backgroundimg" id="back3"></div>
            <div class="backgroundimg" id="back4"></div>
            <div class="backgroundimg" id="back5"></div>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}

.panel {
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    color: white;
    height: 100%;
    min-width: 100%;
    text-align: center;
    display: table;
    margin: 0;
    background: #1c1c1c;
    padding: 0 0;
}

.panel .inner {
    display: table-cell;
    vertical-align: middle;
}

.backgroundimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

}

#back1 {
    background: url("http://www.placecage.com/500/700") no-repeat center fixed;

}

#back2 {
    background: url("http://www.placecage.com/500/600") no-repeat center fixed;
}

#back3 {
    background: url("http://www.placecage.com/500/500") no-repeat center fixed;
}

#back4 {
    background: url("http://www.placecage.com/500/800") no-repeat center fixed;
}

#back5 {
    background: url("http://www.placecage.com/500/900") no-repeat center fixed;
}

@keyframes backgroundchangeFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes backgroundchangeFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
#backgroundchange div:nth-of-type(1) {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
#backgroundchange div:nth-of-type(2) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
#backgroundchange div:nth-of-type(3) {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
#backgroundchange div:nth-of-type(4) {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#backgroundchange div:nth-of-type(5) {
  animation-delay: 0;
  -webkit-animation-delay: 0;
}

#backgroundchange div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;

-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;

}

FIDDLE

Is it possible to use css to make a background image fade or gradient the bottom portion to transparent so that a background color shows?

It is possible - in CSS3 you can set multiple values for background

body {    background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%);   /* FF3.6+ */    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */}