Search code examples
cssimagecross-browserbackground-size

CSS background-size thin black lines on top of images

I'm having a problem with image sizing between Chrome and Safari. On our Webshop (www.85online.de) I get these thin black lines on top of some images in the product grid. enter image description here

I found that the problem is caused by "background-size: cover" in Chrome. When I change the value to "background-size: 100%" these lines disappear, but now they show up in Safari.

Anyone having the same problem? How can I fix this?

Solution

  • This is a background-image problem, your background-image on repeat by default, So you need to add CSS

    .cmp-product-thumb .thumb-image .container-image {
    background-repeat: no-repeat;
}