Search code examples
imagecssgoogle-chromeborderborder-box

Get rid of a weird box on images in Chrome

I have a weird box showing up around my images in Chrome. There is an example here: http://ulrikhogrebe.com/projects/bbcme.html - if you open it in chrome, and look at the first image under the header image (black and white), you will see a border around it (scale your browser if you miss it). Tried border: 0; - but can't seem to loose it. Also, it's fine in Firefox.

Any ideas?

Solution

  • That's because your img tag has no src. You will not be able to remove this border 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 rather than using it as it is design with a src attribute.

    Your current code..

    <img class="article__img article__img--full" src="" alt="">

    .page--bbcme .article__img--full {
  ...
  background: url("../img/bbcme/bbcme2_784.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  ...
}

    Correct usage...

    <img class="article__img article__img--full" src="../img/bbcme/bbcme2_784.jpg" alt="Image description">

    If you for some reason need to use an img with a background image, you can use a transparent image as the source. A 1px x 1px transparent gif or png would do the trick.