removing img border
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
css
edited Jun 27 '11 at 19:38
skaffman
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
add a comment |
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
css
edited Jun 27 '11 at 19:38
skaffman
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
2
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
make sure you close the img tag with/>
– joakimdahlstrom
Jun 27 '11 at 20:13
@joakim: Closing theimgtag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only closeimgtags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.
– cHao
Jun 27 '11 at 23:29
add a comment |
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
css
edited Jun 27 '11 at 19:38
skaffman
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
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
css
css
edited Jun 27 '11 at 19:38
skaffman
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
edited Jun 27 '11 at 19:38
skaffman
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
edited Jun 27 '11 at 19:38
skaffman
340k85736723
edited Jun 27 '11 at 19:38
skaffman
340k85736723
edited Jun 27 '11 at 19:38
skaffman
340k85736723
340k85736723
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
asked Jun 27 '11 at 19:37
ErikErik
2,6472357102
2,6472357102
2
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
make sure you close the img tag with/>
– joakimdahlstrom
Jun 27 '11 at 20:13
@joakim: Closing theimgtag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only closeimgtags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.
– cHao
Jun 27 '11 at 23:29
add a comment |
2
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
make sure you close the img tag with/>
– joakimdahlstrom
Jun 27 '11 at 20:13
@joakim: Closing theimgtag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only closeimgtags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.
– cHao
Jun 27 '11 at 23:29
2
2
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
make sure you close the img tag with
/>– joakimdahlstrom
Jun 27 '11 at 20:13
make sure you close the img tag with
/>– joakimdahlstrom
Jun 27 '11 at 20:13
@joakim: Closing the
img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.– cHao
Jun 27 '11 at 23:29
@joakim: Closing the
img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.– cHao
Jun 27 '11 at 23:29
add a comment |
4 Answers
4
active
oldest
votes
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>
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
add a comment |
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
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
add a comment |
it's the border of alt text, try
img {
text-indent: -999px;
}answered Sep 22 '15 at 11:40
whatifwhatif
491
add a comment |
I use that java script trick, I initialise all images sources with a blank image.
onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");
for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}
edited Jan 19 at 13:36
Harsh Patel
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6497992%2fremoving-img-border%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
add a comment |
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>
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
add a comment |
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>
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
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>
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
answered Jun 27 '11 at 20:12
thirtydotthirtydot
186k38335316
186k38335316
add a comment |
add a comment |
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
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
add a comment |
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
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
add a comment |
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
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
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
#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" />#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" />answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
edited Jan 6 '16 at 20:38
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
answered Jul 14 '15 at 23:05
neaumusicneaumusic
4,99122648
4,99122648
add a comment |
add a comment |
it's the border of alt text, try
img {
text-indent: -999px;
}answered Sep 22 '15 at 11:40
whatifwhatif
491
add a comment |
it's the border of alt text, try
img {
text-indent: -999px;
}answered Sep 22 '15 at 11:40
whatifwhatif
491
add a comment |
it's the border of alt text, try
img {
text-indent: -999px;
}answered Sep 22 '15 at 11:40
whatifwhatif
491
it's the border of alt text, try
img {
text-indent: -999px;
}img {
text-indent: -999px;
}img {
text-indent: -999px;
}answered Sep 22 '15 at 11:40
whatifwhatif
491
answered Sep 22 '15 at 11:40
whatifwhatif
491
answered Sep 22 '15 at 11:40
whatifwhatif
491
answered Sep 22 '15 at 11:40
whatifwhatif
491
491
add a comment |
add a comment |
I use that java script trick, I initialise all images sources with a blank image.
onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");
for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}
edited Jan 19 at 13:36
Harsh Patel
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
add a comment |
I use that java script trick, I initialise all images sources with a blank image.
onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");
for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}
edited Jan 19 at 13:36
Harsh Patel
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
add a comment |
I use that java script trick, I initialise all images sources with a blank image.
onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");
for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}
edited Jan 19 at 13:36
Harsh Patel
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
I use that java script trick, I initialise all images sources with a blank image.
onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");
for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}
edited Jan 19 at 13:36
Harsh Patel
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
edited Jan 19 at 13:36
Harsh Patel
1,69111229
edited Jan 19 at 13:36
Harsh Patel
1,69111229
edited Jan 19 at 13:36
Harsh Patel
1,69111229
1,69111229
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
answered Jan 19 at 13:07
Adel Ben ahmedAdel Ben ahmed
13
13
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6497992%2fremoving-img-border%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all
– lnrbob
Jun 27 '11 at 19:44
make sure you close the img tag with
/>– joakimdahlstrom
Jun 27 '11 at 20:13
@joakim: Closing the
imgtag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only closeimgtags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.– cHao
Jun 27 '11 at 23:29