I am having issues trying to replace this image with CSS, I have no access to the html.
http://jsfiddle.net/ES4mH/
<img
width="64"
height="64"
border="0"
style="width: 64px; height: 64px;"
src="http://www.nitrografixx.com/2013/lock-icon.gif">
</img>
I tried this, and while it adds the image as a background to the current image, it doesn't replace it.
img[src='http://www.nitrografixx.com/2013/lock-icon.gif'] {
background: url(http://www.nitrografixx.com/2013/lock_bg.jpg) center !important;
}
try this
<style>
.className{
content:url("http://www.nitrografixx.com/2013/lock_bg.jpg");
}
</style>
<img class="className"/>
What you are doing is adding the image to the background of the image element but the image element still has the source attribute pointing to the original image and that's why it's not being removed. You should probably use javscript to remove the element and replace it with something else if that's possible.
Related
I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>
I want to show an image with the link on the menubar. My code is as below:
The login class in css is as below:
.login{background: url(../img/user.png) no-repeat 6px center;}
But, I am not able to view the image in the browser. If I tried like
Login
then image appears in the background. But I want to use only image and not the text. how can I do that?
You'll have to set dimensions on the a tag, and set it to display: block;.
.login {
background: url(../img/user.png) no-repeat 6px center;
width: 100px;
height: 100px;
display: block;
}
Of course replace dimensions with the correct ones.
Alternatively you could put the image directly into the a tag like so:
<img src="../img/user.png" />
You can use the following:
<img src="../img/user.png" />
EDIT: I forgot to mention this would mean you have to remove the background image from your CSS.
Use the following code:
<img src= {require('../img/image_namer.svg')} />
05 2021
for SEO
Something to keep in mind when adding image wrapped with href element. If it is possible try to use the img inside the href element. This is good for seo. If the image fail to load it will show you the alt text.
Whenever an image is linked, Google will use the text contained in the image's alt attribute as the anchor text. - moz
src: https://moz.com/learn/seo/anchor-text
When you wrap the img with the href element, always include the alt text.
This will act as a Anchor text to your href element.
<a href="#" class="login" title="Login">
<img src="../img/user.png" alt="User profile"/>
</a>
Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>
JSFIDDLE
Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
<img />
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
Aside
When a background image is added to an img element, it's usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.
Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!
Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.
As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.
A simple solution to remove the border is just make the img tag as a div.
if you fetch the image according to the background position why it is necessary to use a img tag.
Just write the html like ...<div class="next" ..>
you can use a base64 very small transparent image, if you would not use an external file
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the src)
HTML:
<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
</a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>
CSS:
img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}
I'm working on this website http://www.eluminatecreative.com/new/index.html and where it says "sum'r fling" I need to replace it with another img but I can't find it anywhere and I can't replace the spacer img with an image and have it work the same. What is causing this and how can I replace it? Is this some kind of jQuery code I'm not seeing?
Look at the class attached to the spacer <img>
<img src="images/spacer.gif" width="405" height="52" alt="" class="myimage">
If you look at the corresponding CSS:
.yellow_li:hover .myimage {
background:url(../images/summr.png) repeat-y center bottom;
}
So, replace this image: http://www.eluminatecreative.com/images/summr.png
HTML:
<html>
<body>
<header>
<img class="logo" />
</header>
</body>
</html>
CSS:
* {
margin:0px;
padding:0px;
border:none;
}
img.logo {
width:126px;
height:50px;
background-image:url('images/logo.png');
}
One way or another everytime i try to style an IMG like this a strange border appears. Even if I would place border:0px; or border:none; in the img.logo css the border remains.
It's the default "special" border that appears when you use an img element with an a src attribute set to something that doesn't exist (or no src at all).
A common workaround is to set the src to a blank.gif file:
<img class="logo" src="blank.gif" />
I have to point out that it (in this case) makes no sense to use an <img> with background-image. Just set the src attribute and forget about background-image.
You can Simply Use div instead of img for background image , if you are not going to use src attribute anywhere.
<div class="logo"> </div>
otherwise src is required.
Combining #thirtydot's answer to this question with #Layke's answer for Smallest data URI image possible for a transparent image, here is an all-in-one solution:
<img class="logo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
This works for me
img {
text-indent: -999px;
}
I had the same issue, but now the border does not appear.
Solution:
Add following in the img tag in HTML
src=""
border="0"