-1

So i'm trying to put a filter: grayscale on my PNG image but it is not working for some reason.

I cut a part from my image (a mountain, with photoshop, transparent background). and put it above my background image. when i try to transform rotate my mountain it is working but when i try to greyscale it, it is not working.

here is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>

<div id="container">  
<div id="vrouw"></div>
<div id="hoofd"></div>
<div id="berg"></div>
</div>


</body>
</html>

here is my CSS code:

#container {
position: relative;
margin: 0 auto;
width: 801px;
height: 1233px;
}

#vrouw {
background-image: url(../img/vrouw2.jpg);
width: 801px;
height: 1233px;  
margin: auto;
z-index: 1;
}

#hoofd {
background-image: url(../img/hoofd.png);
width: 164px;
height: 213px;
position: absolute;
top: 200px;
left: 250px;
animation-name: huufd;
animation-duration: 6s;
animation-iteration-count:infinite;
animation-timing-function: linear;
z-index: 3;
}


@keyframes huufd {
0% {
    transform: rotate(0deg);
}
10% {
    transform: rotate(-10deg);
}
20% {
    transform: rotate(-5deg);
}
30% {
    transform: rotate(10deg);
}
40% {
    transform: rotate(5deg);
}
50% {
    transform: rotate(0deg);
}
60% {
    transform: translate(5px);
}
70% {
    transform: translate(-5px);
}
80% {
    transform: translateY(3px);
}
90% {
    transform: translateY(-3px);
}
100% {
    transform: translateY(0px);
    transform: translate(0px);
}
}

#berg {
background-image: url(../img/mountain.png);
width: 801px;
height: 518px;
top: 0px;
left: 0px;
position: absolute;
animation-name: bergk;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-timing-function: linear;
z-index: 2;
}


@keyframes bergk {
0% {
    filter: grayscale(10%);
}
10% {
    filter: grayscale(30%);
}
20% {
    filter: grayscale(20%);
}
30% {
    filter: grayscale(40%);
}
40% {
    filter: grayscale(60%);
}
50% {
    filter: grayscale(90%);
}
60% {
    filter: brightness(10%);
}
70% {
    filter: brightness(30%);
}
80% {
    filter: brightness(20%);
}
90% {
    filter: brightness(40%);
}
100% {
    filter: brightness(90%);
}
}
Sid
  • 3
  • 1
  • Have you tried to search a bit before post your question? http://stackoverflow.com/questions/16340159/greyscale-background-css-images – Vel Nov 29 '16 at 18:49

2 Answers2

0

I can't try this now but you can tray this code

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
strava1
  • 57
  • 7
0

add -webkit-filter: grayscale(100%);filter: grayscale(100%); in the #container to make whole thing grayscale. even it works in keyframe. here i have added the demo

#container {
position: relative;
margin: 0 auto;
width: 801px;
height: 1233px;
}

#vrouw {
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png');
width: 801px;
height: 1233px;  
margin: auto;
z-index: 1;
}

#hoofd {
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png');
width: 164px;
height: 213px;
position: absolute;
top: 200px;
left: 250px;
animation-name: huufd;
animation-duration: 6s;
animation-iteration-count:infinite;
animation-timing-function: linear;
z-index: 3;
}


@keyframes huufd {
0% {
    transform: rotate(0deg);
}
10% {
    transform: rotate(-10deg);
}
20% {
    transform: rotate(-5deg);
}
30% {
    transform: rotate(10deg);
}
40% {
    transform: rotate(5deg);
}
50% {
    transform: rotate(0deg);
}
60% {
    transform: translate(5px);
}
70% {
    transform: translate(-5px);
}
80% {
    transform: translateY(3px);
}
90% {
    transform: translateY(-3px);
}
100% {
    transform: translateY(0px);
    transform: translate(0px);
}
}

#berg {
background-image: url('https://www.google.co.in/logos/doodles/2016/jagadish-chandra-boses-158th-birthday-5756743989592064.2-hp.png');
width: 801px;
height: 518px;
top: 0px;
left: 0px;
position: absolute;
animation-name: bergk;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-timing-function: linear;
z-index: 2;
}


@keyframes bergk {
0% {
    filter: grayscale(10%);
}
10% {
    filter: grayscale(30%);
}
20% {
    filter: grayscale(20%);
}
30% {
    filter: grayscale(40%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
40% {
    filter: grayscale(60%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
50% {
    filter: grayscale(90%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
60% {
    filter: brightness(10%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
70% {
    filter: brightness(30%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
80% {
    filter: brightness(20%);
}
90% {
    filter: brightness(40%);
}
100% {
    filter: brightness(90%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>

<div id="container">  
<div id="vrouw"></div>
<div id="hoofd"></div>
<div id="berg"></div>
</div>


</body>
</html>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
  • It is not working ;), let's say when i put a hover on my mountain image it colors the transparent stuff to any color i want but not the image itself. I can rotate, scale my image with keyframes but when i want to grayscale it it is not working. – Sid Nov 29 '16 at 19:23
  • i have added the demo with few keyframes using grayscale. accept as answer if it helps, so that some one like you could find the answer easily. – jafarbtech Nov 29 '16 at 19:37
  • I try to put the grayscale on (bergk) not on (huufd) ;) so your code is not right ;) – Sid Nov 29 '16 at 20:05
  • i have updated the code now. it works fine now. still you are facing issues? – jafarbtech Nov 29 '16 at 20:12
  • It is working now, thank you! I don't understand why it is working with webkit but not without webkit ;) last time i did it without webkit and it was working. Oh well... coding i guess ;) – Sid Nov 29 '16 at 20:17
  • webkit is a standard for both chrome and safari browsers. that has to be included in all animations. to make browser compatible code – jafarbtech Nov 29 '16 at 20:20
  • Sorry kind of new to this website ;) I just accepted. @jafarbtech sometimes i don't include webkit and it is still working ;) so kind of weird it is working now. but maybe a warning for next time to just include it in the code ;) thank you. – Sid Nov 29 '16 at 20:23