So I'm trying to replace text (link) inside a list with an image. This doesn't seem to work
my code:
HTML:
<div id = "headeranna">
<ul>
<li>Vraag het aan Anna</li>
<li>Vraag het aan Anna</li>
</ul>
</div>
CSS:
#headeranna {
position: absolute;
margin-left:410px;
margin-right: 10px;
margin-top: -90px;
float:right;
}
#annaklein{
display:block;
width: 26px;
height: 26px;
background: url(small_anna.gif);
text-indent: -9999px
}
This doesn't do anything at all, am I missing something?
There can be different kind of problems:
wrong url for the image
too big image and it's left top corner is transparent or same as background
etc...
I suggest you to use the background link this:
background: transparent url(small_anna.gif) top left no-repeat;
or at least try:
background: red; /* you can start with checking if you can see the background */
And maybe you should put your code to JsFiddle, there we can see your problem.
It is a good practice to use quotes
background: url("small_anna.gif");
By the way...
An absolute positioned element will always compute float to value "none".
So the declaration in #headeranna float:right; is not necessary.
Take care that the path for your image is ok in relation to your document
You can see this background working here fiddle
(I modify some margin values just for the example target)
Try this in your CSS
#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}
Related
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
I have a html page which is using the same icon many times, and so I have embedded that icon as a background-image in css.
In css, the class for the icon is like this:
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
I display the icon using a<span class='user'></span> tag, so far, so good.
I want the icon to be a link to another page, but I can't make the icon look correct when I do this.
I have tried:
<img class="user" src=""></img>
but this draws a broken link icon over it in Explorer, it looks ok, but has a border in Chrome. It is obviously wrong.
I also tried:
<span class="user"></span>
and this works, but the mouse cursor does not change to a pointer when over the icon.
What should I be doing?
You should make the element block level (at least inline-block) to set the width/height and explicitly set the cursor. These two things are the key components.
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; /* set display so you can set width/height */
cursor: pointer; /* ensure it shows the link cursor */
width: 16px;
height: 16px;
}
And the HTML:
<span class="user"></span>
So, you end up with an inline-block element which shows the image, and then you wrap that with an anchor. This is basically the same as wrapping an anchor around an <img />.
Alternatively, you could do this with just the <a>. You would use the exact same CSS, with this HTML:
Both should achieve what you're after. The difference between these two choices is mostly semantics.
You can set the class attribute on the anchor tag.
Are you looking for something like THIS
The HTML:
The CSS:
.user {
text-indent: -99999px;
background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
float: left;
overflow: hidden;
width: 600px;
height: 200px;
margin: 10px;
}
Hope this is what you need.
try to add this one on your css
cursor:pointer;/*Link with poniter*/
<span class="user" /></span>
I have an object like this:
<div class="myObject">My Object</div>
I want to display a image in front of that <div>'s box, I thought code like this will work:
.myObject {
background-image: url(foo.png);
background-position: 0px -20px;
}
But, unfortunately, this does not work.
How can I accomplish this goal using CSS?
PS: What I want is just to display that image outside that tag's box, don't tell me to do like this:
.myObject {
padding-left: 10px;
background-image: url(foo.png);
background-position: 0px 0px;
}
Thank you.
You can't position a background image on an element outside the box.
To place an image to the left of an element, using pure CSS, the :before pseudo-element can be used:
Demo: http://jsfiddle.net/2HEpn/
.myObject:before {
content: " ";
background-image: url("/favicon.ico"); /* a 16x16 image, for example */
width: 16px;
height: 16px;
display: inline-block; /* pseudo-elements are inline by default */
}
you might need to place it relativly inside the object as i understand from u to the div
#img{
position:absolute;
top:0px;
left:-30px;
}
.myobject{
position:relative;
width:30px;
}
In this jsfiddle I'm trying to create a link that covers the entirety of the sprite image. For some reason though, the height and width attributes of a don't seem to work.
What can I do to create links from sprite images?
add display:inline-block or display:block to a for dimensions to work. dimensions don't take effect for inline elements.
I've updated your fiddle. The link covers the whole image now and this is done by turning the link into a block element with display: block like many other answers above state. I also added the id selector to all your other selectors and moved the selector and declaration with where the actual background image is being declared to the top. The reason for this, is that the li-element's background-position were overwritten because of lack of specificity and due to the order of your css declarations.
Use this
// Code shifted to the end.
Where, CSS is like this:
.sprite-sp1{
background-position: 0 0;
width: 242px;
height: 244px;
}
.sprite-sp1 a{
width: 242px;
height: 244px;
border: 1px solid;
}
.sprite-sp2{
background-position: 0 -294px;
width: 241px;
height: 244px;
}
#container li {
background: url(http://i.imgur.com/iDrt8.png) no-repeat top left;
}
EDIT Edited to make the sprite clickable. The new code shall be:
<ul id="container">
<li><span class="sprite-sp1"></span>test</li>
<li><span class="sprite-sp1"></span></li>
</ul>
Add display:block; to a, it will work then...
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.