cssgoogle-chromeinternet-explorer

CSS background-size:cover getting blurry and dull in Chrome

I've had this feeling more often that images set as background-size:cover (on a div) don't look sharp and crispy in Google Chrome.

Here's the CSS I use.

.slide {
    width:1280px;
    height:400px;
    background-image:url(background.jpg);
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    background-position:center center;
    background-repeat:no-repeat;    
}

View live example here: http://www.wovenplus.com/test/

Just compare the above link in Chrome and IE. In my case in Chrome the image looks blurry and dull and in IE it looks sharp and crispy. (take a close look on the leaves or top of the cusions, or switch between Chrome and IE window to see the difference).

Anyone noticed this also? Any solution for this?

Solution

  • Try adding this to the code: image-rendering: -webkit-optimize-contrast; For me it did the trick perfectly.