Go to http://willhay.io in Safari for the best example of this issue I can't seem to solve. Change the size of the browser and the background image will blur itself noticeably. I know it has something to do with how the browser renders the image, and I tried using image-rendering:crisp edges;
body {
background-image: url("../img/background.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
-webkit-animation: zoomin 5s 1;
image-rendering:crisp-edges;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
}
but it still blurs and is not full quality. Any help would be appreciated!