How to remove border from image in chrome?

Question

I have a web application with an image tag which has a css class but no src attribute. Something like this:

<img class="image"/>

The css class just defines the url of the image and its size but no border properties are defined. The problem is that a white border is being rendered for the image only in chrome browser (it works fine in firefox and IE11). I've tried to remove it explicitely through css rules but until now I can't.

A solution is to set the url of the image through the srcattribute but I have too many images which take their source from css rules. So, is there any way to remove that white border from css? Maybe is that a chrome bug?

This issue is happening to me from few days ago. It seems it comes with the last update of chrome.

Here you have a jsfiddle to test what I say.

And here you have directly the same code snippet of the jsfiddle example:

body {
   background-color: brown;
   height: 100%;
   position: absolute;
   width: 100%;   
  }
  
  .image {
   background-image: url("http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png");
   background-repeat: no-repeat;
   background-size: 600px 400px;
   content: '';
   display: inline-block;
   height: 400px;
   padding: 0;
   position: relative;
   top: 5px;
   vertical-align: top;
   width: 600px;
  }

<div>
    <img class="image"/>
</div>

Try http://stackoverflow.com/questions/6013071/removing-the-image-border-in-chrome-ie9 — Yvo Cilon, Oct 21 '15 at 11:20
That's not how the `` tag should be used, you'll get the broken image icon in a lot of browsers, since there is no src set, this is what I see - http://i.imgur.com/SmlwXzl.png — Nick R, Oct 21 '15 at 11:21
this may not be the valid markup and you can use div instead of img without src. You may see the browser compatibility issues too. — Nandu Hulsure, Oct 21 '15 at 11:27
@JNF no reasons for use `img` instead `div`. It's just it was made by this way lot time ago. But I've seen in all the comments and answers that's no correct so I'm going to replace all images with no `src` attribute with `div` elements. — christiansr85, Oct 21 '15 at 11:43

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

please check the accepted answer: Removing default border around an image - Chrome browser

"Chrome displays a border since it cannot find the image"

edited May 23 '17 at 11:58

Community

1
1

answered Oct 21 '15 at 11:22

Felix Geenen

2,465
1
28
37

cakan · Accepted Answer · 2015-10-21T11:37:11.913

2

Why do you set image as background to the img tag? You should use the src attribute (which is required to have valid html) to define the image url.

<img class="image" src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>

If that is not possible for some reason, consider using div instead of img to achieve the same effect.

<div class="image"></div>

edited Oct 21 '15 at 11:37

answered Oct 21 '15 at 11:30

cakan

2,099
5
32
42

score 1 · Answer 3 · answered Oct 21 '15 at 11:35

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

body {
  background-color: brown;
  height: 100%;
  position: absolute;
  width: 100%;   
}
  
.img {
  background-repeat: no-repeat;
  background-size: 600px 400px;
  content: '';
  display: inline-block;
  height: 400px;
  padding: 0;
  position: relative;
  top: 5px;
  vertical-align: top;
  width: 600px;
}

<div>
    <img src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>
</div>

How to remove border from image in chrome?

3 Answers3