How to prevent the background image from getting blurry

Try to add:

image-rendering: -webkit-optimize-contrast;

Here's the cross browser technique:

 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)*/
 -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */

Try adding this to the code: image-rendering: pixelated; For me it worked perfectly. you can also try - image-rendering: -webkit-optimize-contrast;