Background-image rendering causes blurring of HD background

219 views Asked by At

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!

0

There are 0 answers