html { background : url(images/bg-xmas.jpg) center center no-repeat fixed; background-size : cover; height : 100%; width : 100%; } /*Keyframes*/ @keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 100% { background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px; } } @-moz-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 100% { background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px; } } @-webkit-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 100% { background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px; } } @-ms-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 100% { background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px; } } body.snowfall { background-image : url('images/snow.png'), url('images/snow3.png'), url('images/snow2.png'), url('images/snow-4.png'); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; height: 100%; width: 100%; float: left; } h2{ font-size:66px; color:#fff; text-align:center; }