A Color-Shifting Header For Contempo...

Sometime ago, I wanted a little something extra in the header to make the image pop a bit, so, I came up with a simple color-shifting mechanism for Contempo that could be applied to any header image. I had mentioned this technique a few times before, but, recently, I felt a little more detail was in order. Just add the following CSS code using Theme > Advanced > Customize > Add CSS:

@keyframes colorshift {
0%   {background-color: orange;}
10%  {background-color: yellow;}
30%  {background-color: red;}
50%  {background-color: white;}
60%  {background-color: blue;}
80%  {background-color: black;}
90%  {background-color: green;}
100% {background-color: orange;}
}
.bg-photo-overlay {
background-color: orange;
opacity:0.25;
filter:alpha(opacity=25);
background-repeat:no-repeat;
background-image:none;
animation-name: colorshift;
animation-duration: 30s;
animation-iteration-count: infinite;
}

In the CSS code above the running time for the animation is set in seconds with the default being 30 seconds (30s). The initial color, starting color and ending color should all be the same as highlighted above. Colors can be specified using either HTML Color Names or RGB Values. Additional color changes can be made by adding lines to the keyframes section (i.e.: 20% {background-color: deeppink;}). Note that each percentage value should be different for each color change.

By the way, the hidden image in this post is Hiratsuka Shizuka from the anime My Teen Romantic Comedy SNAFU. Enjoy.