Fading background image from grey to colour after loading a page

Question

I am trying to get an effect of fading background (once) from greyscale to colour after page is loaded up. I came up with this, but doesn't work:

<style>
    body {
        background: #ffffff url('http://www.itgeared.com/images/content/1481-1.jpg') no-repeat top;
        background-attachment: fixed; 
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;            
    }    
    .content {height:2000px;}

@keyframes filter-animation {
   0% ,75%{
   filter: grayscale(1);
}

 100% {
  filter: grayscale(0);
  }

}


@-webkit-keyframes filter-animation {
 0%, 75% {
   -webkit-filter: grayscale(1);
 }

 100% {
   -webkit-filter: grayscale(0);
 }

}

and html:

<div class="content">
    . <br/>. <br/>. <br/>. <br/>
</div>

I'm trying to achieve something like this: link here.

Here is jsfiddle

Thanks

Read more here, it's an answer - https://stackoverflow.com/a/21899030/6908117 — Nick Deny, Oct 08 '17 at 13:46
thanks but I didn't want to rebuild the whole page (I copied only basics from it). The answer below solves the issue. — Piotr Ciszewski, Oct 08 '17 at 18:53

Naren Murali · Accepted Answer · 2017-10-09T04:39:33.913

Update:

You may want to have a different layout for your image when you are in a mobile or tablet so you can add this media query at the end of the CSS document.

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
    .img {
        position: fixed;
        width: auto;
        height:80%;
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

So the new CSS class img will override the old one when the width of the screen is less than 768px.

Note: Please play around with this CSS to suit your need. But this query works for mobile and tablets and just needs minor tweaking!

Old Answer:

Instead of using background-image which cannot be used with the above CSS try an fixed positioned image for your page instead which basically does the same thing. Here is the code for doing it.

Note: Positioning the image needs to be adjusted to suit your requirement. like you can have either height:100%;width:auto or height:auto;width:100%, this needs to be tweaked as per your need.

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

.img {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  animation: filter-animation 8s;
  -webkit-animation: filter-animation 8s;
}

.content {
  height: 2000px;
}

@keyframes filter-animation {
  0%,
  75% {
    filter: grayscale(1);
  }
  100% {
    filter: grayscale(0);
  }
}

@-webkit-keyframes filter-animation {
  0%,
  75% {
    -webkit-filter: grayscale(1);
  }
  100% {
    -webkit-filter: grayscale(0);
  }
}

<img class="img" src="http://www.itgeared.com/images/content/1481-1.jpg" />
<div class="content">
  .
  <br/>.
  <br/>.
  <br/>.
  <br/>
</div>

@NaurenMurali thanks. One more question. How can I center horizontally the background image? I'm doing this on bootstrap and the main content of the image is in the center, so when I use mobile it shows the left side of the image instead of center of it. How to center that image? — Piotr Ciszewski, Oct 08 '17 at 20:39
@PiotrCiszewski Please give me some time! I will provide resolution — Naren Murali, Oct 08 '17 at 20:55
@PiotrCiszewski Thanks for waiting, I have updated my answer with a media query for centering on mobile and tablet, please use this CSS class and adjust it to suit your need, hope this help you resolve the issue completely! — Naren Murali, Oct 09 '17 at 04:40

Fading background image from grey to colour after loading a page

1 Answers1