7

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?

Thomas Eilander
  • 73
  • 1
  • 1
  • 3
  • 1
    Possible duplicate of [How to prevent the background image from getting blurry](https://stackoverflow.com/questions/18677983/how-to-prevent-the-background-image-from-getting-blurry) – Adam Aug 21 '17 at 22:20

3 Answers3

31

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

anicolae
  • 523
  • 3
  • 6
  • 1
    Dude! Works perfect! :D – Thomas Eilander Feb 01 '16 at 23:10
  • Unfortunately this is not quite true. In some occasions the effect is definitely better than without, but it has negative side effects. In repeating detail structures the image becomes irregular if you look closely. The image never get’s near to what you see in Photoshop in any zoom size. – Garavani Apr 04 '22 at 14:47
0

i think it's because the pixels a divided by two, four, eight...etc. so in order to get the best image quality try to make your height equal to the original height /2 or 4 ...etc.

Aymene Bourafai
  • 93
  • 1
  • 8
  • Wouldn't that by nearly impossible in a responsive website? In my example the div has a fixed width, but normally it would be 100%. – Thomas Eilander Feb 01 '16 at 22:57
0

if using some CMS system like wordpress druple or any media mange or optimization tool that time image not load original verion or may be the verion come the optimization or compress image

i dont think issue on browser it coding side here my

 shopify code snippet

<section class="img" style="background:url({{image  | img_url: 'master' }}) no-repeat center;>
  1. on worpdress defualt image size you see small. mediam, large etc you can set there image pixel size in admin side. this concept all type cms you have to check on our CMS
Mr Coder
  • 507
  • 3
  • 13