SCSS class for using a scaled and filtered gif as background

filtered-gif-cover-bg

// Using a scaled and filtered gif as background

.background {
  position: absolute;
  top: 0;
  left: 0;
	width: 20%;
  height: 20%;
  z-index: -1;
  background-image: url('http://37.media.tumblr.com/tumblr_lupg946u5S1qe0eclo1_r5_500.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  // Grayscaling (no blurring on this one)
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: blur(0px) grayscale(0.8) brightness(0.5);
	-webkit-transform-origin: top left;
   -moz-transform-origin: top left;
	      transform-origin: top left;
  -webkit-transform: scale(5);
  -moz-transform: scale(5);
	transform: scale(5);
  overflow: hidden;
}