css "background-image" shows unwanted border, img "src" does not
This should work. I believe the problem is to do with the img
tag used without the src
attribute. In that case, we can simply use a div
tag.
I have come across this problem earlier on SO, I do not remember the link to that question though.
1) Make your height
and width
as 0.
2) Give appropriate padding as per the image size. (i.e padding: width/2px height/2px width/2px height/2px )
In short your left and right padding should add upto width
of the image
AND
your top and bottom padding should add upto height
of the image.
img {
background: url(http://i.stack.imgur.com/8C4wK.png) no-repeat;
font-size:0;
width:0px;
height:0px;
padding:36px 99px 36px 99px; /* Since height and width are 0. use appropriate padding. Image is of 197 X 73 dimension. So using 36px on left and right whereas 99px each on top and bottom*/
border-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<img />
The answer is not to use an <img>
tag and try to set a background-image
in css.
Either use a <div>
or <img src="pic.png">
and not an invalid mix of both.
Credits to rblarsen who pointed this out.