I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?
<div class="mosaic-overlay">
<img class="cover1"></div>
.cover1 {width:300px;height:185px;
float:left;background: url('/img/cover.jpg') 0px 0px;
border:0;}
Many thanks.
Erik
It's the default "special" border that appears in some browsers when an img
element has no src
attribute, or a src
attribute pointing to an image that does not exist.
For example, look at this in IE9: http://jsfiddle.net/SdbNE/
A common workaround is to set the src
to a blank.gif
file:
<img class="cover1" src="blank.gif" />
Or, just use a div
instead?
<div class="cover1"></div>
Set your <img>
source to transparent.
#img {
width:150px;
height:auto;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;
background-size: cover;
}
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />
Notice the img src is blank and has no border but CSS sets the background: url()
transparent src:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA
Credit CSS Tricks
it's the border of alt text, try
img {
text-indent: -999px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With