css3 - Get rid of a weird box on images in Chrome -

In Chrome I have a strange box around my images. Here's an example: - If you open it in Chrome, And look at the first image under header image (black and white), you will see a border around it (if you forget it then scale your browser). Tried the border: 0; - But it can not seem to loose. Besides, this is okay in Firefox

Any thoughts?

This is because your img tags contain src . You will not be able to overcome this limit with CSS.

The only way to fix this is to use the img tag correctly. You are currently setting a background image on the tag instead of using the tag because it Designed with the src attribute.

Your current code ..

& lt; Img class = "article__img article__img - full" src = "" alt = "" & gt;

.page - bbcme .article__img - full {. .. Background: URL ("../img/bbcme/bbcme2_784.jpg"); Background-condition: center center; Repeat Background: No Repetition; Background-shaped: 100%; ...}

Correct usage ...

  & lt; Img class = "article__img article__ img - complete" src = "../ img / bbcme / bbcme2_784.jpg" alt = "image description" & gt;  

If you need to use img with a background image for some reason, then you can use a transparent image as the source . 1px x 1px will move transparent gif or png.