i have to load an image inside an anchor tag .
<a> <img calss="imageclass"/></a>
if load like this iam getting border around the image.
I have tried everything like border: 0 and border-style:none but nothing works.
i have one solution, if i use div element instead of img it comes without any border.
please help me how to load this image without border and not using div element.
Try this in your css:
a, img {
border: 0 none;
}
JSFIddle. Here it is
<img src="http://i.imgur.com/PWSOy.jpg" />
Upload your image via css code ... like this
#bgimg { background: url("http://www.staticimages.co/seemeagain/upgrade-sprite.png") -35px -3px;
display:block;width: 25px;height: 25px;float: left;
}
and stop using img tag for uploading background image , use span tag and call your bgimg tag inside there .
Related
CSS
.content {
background-image: url("Pics/GameLogoBackground.jpg");
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div class="content" style="display:block;width:100%;height:600px">
I can't see the div background img, please help!
I have tried to solve the problem, with no success.
To reference a class, use the '.' prefix before "content" in the CSS.
So it would become:
.content {
...
}
EDIT:
As you now say the '.' was mistakenly missing from your CSS, some things to try:
Ensure that the file exists in the specified location.
Check that the div isn't behind anything else.
Check if file is present.Go to Your index page and try putting path to image into url. JPG and JPEG are not the same thing
Do not use just background-image , instead of that use for example : https://www.w3schools.com/cssref/css3_pr_background.asp
Also if you are not doing some CSS dark magic there is not reason to put CSS in tag and in style.
I checked Your code and it should be working. Problem is with Your picture. Try to pass more HTML code. There is a chance that some other DIV is covering it
When I use an img tag inside of an a tag, these little lines at the bottom show up. I've tried several css properties to remove them and couldn't find one that did the trick.
Relevant html:
<a href='https://github.com/'>
<img class='ContactLink' src='Images/Icons/GitHub.png' alt='GitHub'>
</a>
<a href='https://twitter.com/'>
<img class='ContactLink' src='Images/Icons/Twitter.png' alt='Twitter'>
</a>
<img class='ContactLink' src='Images/Icons/Gmail.png' alt='Email'>
CSS:
.ContactLink{
height: 50px;
width: 50px;
border: 0;
}
///Add this code in CSS file
a {
text-decoration:none;
}
use normalize css or try this
a,a:focus,a:hover,a:active{
text-decoration:none;
outline-width: 0;
}
img {
display:inline-block;
}
I will suggest to check the image files using any tool like photoshop and see if there is any transparent pixel there for that icon. Also try to keep the dimensions of all the three icon exactly same. If required edit the image accordingly.
You can see the problem clearly here. What I want is for the key to be to the right of the SVG image instead of directly below it. I've tried putting an <img> tag inside the svg, outside the svg, I tried wrapping the svg in a body tag then put the key outside of the body, inside the body, nothing seems to be working here. Any of you wonderful people have any ideas?
give them both ID or class attributes and limit their widths with CSS rules, like 75% and 20%, whatever. That should already be sufficient (it was when I tried it).
<svg id="mysvg" ....... >
<img id="myimg" ....... >
#mysvg { width: 75%; }
#myimg { width: 20%; }
I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me.
I have a img tag with a class attribute under anchor tag.
So my html looks like:
<ul id="racing-menu" class="accordion-menu list-unstyled">
<li>
<a id"something" name class"something">
<img class="icon_71">
</a>
</li>
</ul>
CSS
.icon_71 {
background: url(../../cms/images/sports/something.png) no-repeat;
width: 36px;
height: 22px;
margin: 0 10px 0 0;
float: left;
}
I tried the following solutions in order to avoid default border on Chrome browser
1)border: 0
2)outline: none
3)changing img class to img id
4)Setting
a img {
border:none
}
a img {
border:0
}
Your <img> tag does not have a src attribute since you are setting background with css.
<img class="icon_406">
This is invalid html - if you intend to implement icons through css use <span> or something similar that does not require src attribute by specification. Or load the image icons through src attribute of <img> element.
Chrome displays a border since it cannot find the image (same as if the src had a broken link inside) - but the icon shows since css is still able to apply the class styling to the empty <img> element.
Replace IMG tag width DIV, and it should work :)
Try to replace 'a img' with just 'a'.
Means add the following css:
a img {
border: none;
}
You can also try some bad stuff to test if the border is the problem:
* {
border: none !important;
}
But i don't recommend the second code because it may generate other issues, the second code is just thaught to test if the border is the problem.
You can use <img>, but set the src property to an empty string.
// Get an HTMLImageElement anyway you want.
document.querySelectorAll('img').forEach(function(img) {
// This can also be used to abort an image load.
img.src = '';
});
Tested in Chrome only.
I have the following html:
<div class="A">
<img src="image1.png" width="100px" height="100px"/>
</div>
In my media queries css style sheet, I would like to replace that image with another one (image2.png).
What is the css code I need to write?
I tried the following:
.A img
{
background:url("image2.png") no-repeat;
}
But this doesn't seem correct?
If you are using CSS3, then content is the answer:
.A img
{
content: url("image2.png");
}
You can't modify that in CSS, instead, use a div like this:
<div id='#theImage'></div>
Then in CSS:
#theImage {
width:100px;
height:100px;
background:url("image1.png") no-repeat;
}
Then you can restyle the div using a media query.
Your code doesn't work because the image in the original <img> tag is a foreground image, which is different from a background image.
So setting the CSS doesn't get rid of the original image. And in addition, although the CSS does work, the background image it displays is shown behind the foreground image.
In order to do this, you need to either have the original image as a background image (ie set using CSS background-image property), or switch to replacing the foreground image in your script. This would involve setting the src attribute:
$('.a img').attr('src','newimage.png');
you're setting a background of an img element you won't be able to see, because the image defined in its src attribute is covering it
Anyway if both the images are relevant for the context from a semantic point of view, you should not use css to place the second image in place of the first one
If you put background on an image, the image will simply overlap the background; making the background totally invisible.
The solution is to make the image as a background of an element
Like so: http://jsfiddle.net/PabXF/
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>