I'd like to replace most/all images on a site with CSS, and I was wondering which HTML tag was the most semantically meaningful to use to apply the background-image element to. I'm going to be replacing both <img> tags (the images are part of the interface, not content, and I would like to be able to use CSS sprites eventually), but I wasn't sure if I should use the <span> tag with an id/class mapped to the specific situation/image or if there was a better idea. As an example we're currently displaying our logo using an empty <h6></h6> element, with the following CSS:

#header h6 {
background: url('../img/logo.jpg') no-repeat top right;
padding: 5px 50px;
margin:10px 20px 0 0;
height: 65px;
}

I was thinking it makes no sense for this to be a "header," but it's also not really a span or a div, it's an image. An <img> tag still doesn't feel right though, because I would like to be able to edit the style purely via CSS, not in my code. It's a fairly complex PHP site and finding the inline <img>s and styles is too cumbersome.

3 answers

4
points

What could be more semantic than an <img> element?

Use the same transparent shim image for every faux image element and class it (or use the cascade) set it to display block and set your background, but you can now also take advantage of title and alt text if you wish.

http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element/

Answered about 3 years ago by Tony Crockford
  • Apparently the demo/code example in the link you provided is no longer available. Are there any other links to it, or could you provide sample code? KevinM1 over 2 years ago
  • The demo is gone, but there are comments and code here: http://ajaxian.com/archives/tip-using-a-background-image-on-an-image that might be of interest Tony Crockford over 2 years ago
Ktash 1851
3
points

While I do agree with Tony, I also think that it depends on the context. For instance, in the example you give, where you are using it for your header, I would say that that is a <h*> tag (<h6> seems a little high for me, but I'll let it slide; I once read a very good article about how you only really ever need at most about 4 levels of headings ever, even for things like books, but I can't find it). If you are going to swap out your images for background, apply the most appropriate tag for the contents of the image (unless it is an image, in which case, as Tony says, use an <img> tag). For headers, use <h*> tags, for words use a <p> tag, for links/anchors use <a>, et cetera, et cetera.

Also, as a side note, on your headings, I would recommend actually putting in text for you title, and using a negative text-indent to clear it from the background. That is, if you are commited to replacing <img> tags. I do so and use a negative text-indent, but you have to be aware of the trade offs for things like SEO. In this case, Tony's solution is probably the best you'll get since you can use the alt and title tags, but it's always good to know your options.

Answered about 3 years ago by Ktash
  • I'd add that if the images are part of the interface, then they are probably best attached to the elements of the interface they are associated with. e.g. put them on the link elements, or the button elements in use. Tony Crockford about 3 years ago
  • It's an h6 because they were using a CSS trick to show one of two (or no) logo, that's why I wanted to switch it to something meaningful. Only h3 and h4 (oddly) are currently semantically meaningful on the site which I mean to change. SEO isn't an issue (intranet site) but I was wondering what I should do as it's a logo, so it is a header, really. It's the company name and at the top of the document, it really should be h1. I hadn't thought of that; I think I'll use an h1 with the logo's text. Ben Brocka about 3 years ago
  • When I do it, I do an h1 tag, and include the text in the image in the tag itself. Then I use a negative text indent of 9999 to remove the text from the page. This has issues with IE7 and below though, but I think it's semantically a good solution. So if you need IE support, then I would just use an h1 tag, since it is your top most heading. Ktash about 3 years ago
  • I'm using an H1 header (it's our company logo) and hiding the text the negative indent now. The more I read into this regarding SEO though, the more uncomfortable I am. It seems that it's considered "inappropriate" to use the negative text indent or otherwise hide the text, even though it seems the only solution when your top header is an image: which is how almost every major website in existence does this. Is the "hiding" text only considered inappropriate when used to hide links/keywords? In this case it simply seems like presenting similar content to both the search engine crawler and the person: Large, important text stating the company/site name. Ben Brocka about 3 years ago
  • Oh, and to answer your question, Google considers this inappropriate no matter what, but I think that is wrong. I think it is misused and that is the only reason it is wrong. Hiding links and keywords to improve you SEO results is one thing, but hiding the text content of an image background I feel is completely appropriate. But that's my opinion. We could likely have a long debate about that among a lot of people. Ktash about 3 years ago
1
point

I believe span will be your best option, given it's the prime HTML place-holder element and allows for easy control: http://www.w3schools.com/tags/tag_span.asp

Answered about 3 years ago by De Youngster
  • Thanks what I'm switching it to for now, but I was wondering if there was anything more semantically valid. Span certainly works though Ben Brocka about 3 years ago