1

I'm using <img> with background-image property to show images throughout my application. This worked fine till week in all browsers. In Chrome 45, it now shows a white border around all images. I found that this issue happens only when you try to load image URL using background-image property.

Here the code sample showing the problem in Chrome 45

<div style="background:grey; padding: 50px;">
  
<img style="background-image:url('https://vcc.attendanywhere.com/v3/images/join_call.png'); border: none;" width="46" height="29" border="0">

<br/><br/><br/>

<img src="https://vcc.attendanywhere.com/v3/images/join_call.png" width="46" height="29" border="0">

</div>

You'll notice the first image has got white border as follows. How can I get rid of this border?

enter image description here

Community
  • 1
  • 1
Raj
  • 2,642
  • 3
  • 22
  • 20
  • 5
    Any particular reason you’re using an `` with a `background-image` and not just an `` with a `src` or a `
    ` with a `background-image`? An `` that doesn’t display an image seems kind of pointless.
     – Ry- Sep 04 '15 at 04:36
  • 1
    There is not much you can do to style the outline. It's caused by the lack of a working `src` attribute. [Here is a related question](http://stackoverflow.com/questions/13151340/how-to-remove-borders-around-broken-images-in-webkit). The good news is that there is no reason to use an `` element without a `src` attribute! – misterManSam Sep 04 '15 at 05:04
  • since you dont hav src in that so it causing you a border around img tag, why dont you use img url in src ? – Dimag Kharab Sep 04 '15 at 05:11
  • @minitech good point. I've got too many images on some pages, I load image paths via CSS file for 2 reasons: 1. It gives better performance, as CSS files are cacheable by browsers. 2. I can reuse some image paths for different images on single page without generating unnecessary html (from server-side). – Raj Sep 04 '15 at 06:02
  • 2
    An `` without a `src` is not only pointless, but also semantically wrong. Not to mention syntactically. Now to answer your concerns, are you sure using CSS has better performance? I don't think so, at least not the way you're doing it. (It would be if you were using sprites.) So there's no reason to stop doing this and use the proper way instead. – Mr Lister Sep 04 '15 at 06:08
  • Thanks guys, I'm convinced :) I'm reverting code to use with src attribute to load the images. – Raj Sep 07 '15 at 03:10

0 Answers0