#sugarpour { background-color: #000; background-repeat: no-repeat; background-size: cover; height: 100%; position: absolute; z-index: 0; width: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; } #sugarpour img { width: 555px; height: 100%; } #sugarpile { -webkit-transition: background-position 2s; -moz-transition: background-position 2s; -o-transition: background-position 2s; transition: background-position 2s; background-position: 50% 0px; background-image: url('../images/sugar-pile.png'); background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; z-index: 0; display: none; } #gradient { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA3NTE5MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEyMzM1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #075192), color-stop(100%, #123359));*/ /*background-image: -moz-linear-gradient(#075192, #123359);*/ /*background-image: -webkit-linear-gradient(#075192, #123359);*/ /*background-image: linear-gradient(#075192, #123359);*/ /*background-image: -moz-linear-gradient(#166fbe, #1A4878);*/ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1A4878), color-stop(100%, #111111)); background-image: -moz-linear-gradient(#1A4878, #111111); background-image: -webkit-linear-gradient(#1A4878, #111111); background-image: linear-gradient(#1A4878, #111111); opacity: 0.7; height: 100%; width: 100%; position: absolute; z-index: 0; } #gradient:before { background: transparent url("../images/noise.png") repeat scroll top left; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } body { /*background-color: #66B;*/ /* background-color: #000;*/ /* remove gradient from */ /* background-image: none;*/ } body:before { background: none; } span.highlight { background-color: #fff; /*background-color: #004990;*/ display: inline-block; padding: 0 10px; color: #1fb7e8; }