CODEWITHSUNDEEP
javascriptjqueryhtmlcss
adit
adit

Reputation: 33674

removing border around an <img> tag and jQuery lazy loading

I have the following html:

<div class="compPhoto compPhoto3">
          <img class="lazy" src="" alt="" data-original="http://distilleryimage4.s3.amazonaws.com/c77631323e0411e394d322000a1f8c09_8.jpg" width="289" ;="" height="289">
</div>

I am actually using jQuery lazy load to load the images, however in the src tag I decided not to use an image, instead I just want to use a background. However then it gives me weird frame around the img:

enter image description here

I tried setting border: none, but it has no impact.
Any ideas on removing the border?

Upvotes: 0

Views: 1990

Answers (2)

Максим
Максим

Reputation: 1

I disagree with Tim Ebenezer who wrote above. It is possible to hide the frame if the img tag is to add the style "border-style: none", but it is imperative that the src="" tag is at least empty, then the frame is hidden in Google Chrome, Firefox, EGDE, IE 10-11! But unfortunately it will not work for safari on MacOS and iOS.

Upvotes: 0

Tim Ebenezer
Tim Ebenezer

Reputation: 2724

The grey border will be shown by certain browsers to denote that the image cannot be found. Because of this, you will not be able to remove it using CSS.

You shouldn't really be using an <img> tag like this. If you just want to use background-images, why not use a <div> or another block tag.

Upvotes: 3

Related Questions