body {
  margin: 0;
  padding: 0;
}
.parallax {
  -webkit-opacity: 0.3;
  -moz-opacity: 0.3;
  -o-opacity: 0.3;
  -ms-opacity: 0.3;
  opacity: 0.3;
  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 10+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -moz-filter: grayscale(100%);

}
.parallax-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.parallax-overlay.pattern {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) repeat fixed;
}
.parallax-overlay.gradient {
  background-color: #00eaff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00eaff), to(#88006d));
  background-image: -webkit-linear-gradient(top, #00eaff, #88006d);
  background-image: -moz-linear-gradient(top, #00eaff, #88006d);
  background-image: -ms-linear-gradient(top, #00eaff, #88006d);
  background-image: -o-linear-gradient(top, #00eaff, #88006d);
}