this is my site. In the sidebar, you'll notice a little blue image below the text; "Capital Auction Expert is located within Drop and Ship." How do I get the entire thing to appear via CSS? I know how to do it via HTML markup, but I'm told that it's better to do it via CSS? This is the actual image of the badge that should appear. img.badge { background: transparent url(images/auctionsbadge.gif) no-repeat scroll 0% 50%; height: 176px; width: 237px; Code (markup):
Uh. The image element should be used for images that are content, such as images related to articles (picture of Michael Jackson next to his biography). To me this isn't exactly "content", so I think just an anchor would do fine (<a><img></a> is debatable). Btw, you shouldn't ever even try to put a background behind an image element because has intrinsic dimensions which means the content of the element (IMG, OBJECT) is replaced by the SRC attribute, and this would mean the background would be hidden underneath the whole thing. I would do it like so.. P.S. - who's the chick in your avatar?
shouldn't be a class of "auctions" rather than an id of "auctions" instead? and why is there a need to absolute position the image all the way to the left with negative margins?
Did you try the code? I made it an ID because as far as I know, there's only ONE instance. And I'm not offsetting the image, but the element inside (image replacement) so the text that appears won't show up with CSS on - but will with CSS off.
Ah, you could also have the text like normal and sit the image on top like this: <a href="auctions.php" title="Current Auctions" id="auctions"><span></span>Current Auctions</a> a#auctions { display:block; width:154px; height:190px; position: relative; <-- so the span know who's the daddy... if you want this absolutely positioned that would also do the job } a#auctions span { position: absolute; background: url(http://apatalk.com/test/drop2/images/auctionsbadge.gif) 0 0 no-repeat; height: 100%;<-- sometimes i just need to set the same height and width again width: 100%; } The one problem with this one is I've done it both ways, with the empty span before and after the text, and so even tho here I've set the image at 0, 0 (top left), that may not be the best place for it in real life (I always end up having to play with it to make sure the text is well hidden under the image-- I'm probably confusing myself by not keeping the span in one place every time). In either case, the span is absolutely positioned-- relative to the element holding the text. So 0, 0 for the span should always be the top left corner of the element (not the page). This gives you 100% control and it's not the sort of absolute positioning that fcks with page layouts... it's contained in something else. Soulscratch's is a better idea if the text will never fit behind the image, and I can't tell by looking at the dimensions, but I usually use the above technique for titles and the such-- the logo-image thing is usually pretty big. If there is transparency in the image, the text will also show through in the above version. Here's a link: http://www.mezzoblue.com/tests/revised-image-replacement/ One problem with the one Soulscratch gave is when someone is surfing with images off but CSS on-- the image doesn't appear and the CSS continues to push the real text off-screen.