CSS background-size: coverage becomes blurry and boring in Chrome

I had this feeling more often than the images set as the background: the cover (on the div) does not look crisp and crisp in Google Chrome.

Here is the CSS that 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;    
}

See a 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 boring, and in IE it looks crisp and crisp. (look carefully at the leaves or top of the cuts, or go between the Chrome window and IE to see the difference).

Has anyone noticed this? Any solution for this?

+4
source share
2

: image-rendering: -webkit-optimize-contrast; .

+18

, , a , , ... .. , , /2 4... ..

0

Source: https://habr.com/ru/post/1626931/


All Articles