I started reading upon html5 and I am trying to work on a project so that I can see how things work. I know that the tag can be use like this:

<figure id="tank">
   <img src="img/figures.jpg" alt="the tank">
   <p>The tank</p>

Though I need to have 6 of those figures, as such I want to use sprites and (unless I dont know something important) sprites only work if i add the image width css (background-image). So what I would do is something like:

<figure id="tank">
   <pre></pre> <!-- add image from css -->
   <p>The tank</p>

can I use figure tag like that?

Thanks a lot

  • Using the clip property and absolutely positioning the image with a fixed width and height in the figure element you could use a single image, without resorting to css backgrounds. Users with css off will see your whole sprite though. http://www.w3.org/TR/CSS2/visufx.html#clipping Tony Crockford almost 3 years ago

3 answers

danwellman 5600
This was chosen as the best answer

The suggested mark-up you have shown above does validate as HTML5 so I see no reason why a background image cannot be used on an element within the <figure> The <figure> element isn't restricted solely for use with images and/or captions, it can also be used to show for example, code, as the doctor explains

Semantically though I wouldn't use a <pre> element as this element is supposed to represent preformatted text, which a background image isn't. I would go with a more generic element, such as a <div> personally

Answered almost 3 years ago by danwellman
  • thanks man, so I would just use <div></div> instead of pre cool - thanks man Aurel almost 3 years ago
  • this would be the first time that I use <div> without an id or a class. Just to be sure, is it ok to just have divs without class or id? I am thinking of adding the id in the figure so something like <figure id="bla"><div></div><p>..</p><figure> -- is that better than adding the id into the div in this case? Aurel almost 3 years ago
  • Sure, it's fine to use a div without an id or class :) danwellman almost 3 years ago

You could set the background image on a generic image element, and that way you still get the benefit of alt text etc.

Use a transparent 1px image as a placeholder, and set height and width to suit the background image.

<figure id="tank">
   <img src="img/1px.gif" alt="the tank">
    <figcaption>The Tank</figcaption>

Note that you can use figcaption.

I think you should examine why you want to use sprites as background images though.

Images that are important enough to be wrapped in figure, shouldn't be relegated to background images.

if the images are not content then they shouldn't be wrapped in figure, apply them to some other suitable filler element.

@zcorpan has the right answer to the question you didn't ask, which should have been should I use a background image or not?

Answered almost 3 years ago by Tony Crockford
  • yes your are right, though your answer is interesting and informative @zcorpan answered the question. Now that you made me think about it I should not use background-image in this case. However I am sure I will find these two tips useful. thanks Aurel almost 3 years ago

As a general rule, you should be able to disable CSS and still get the same content. If you use an empty element or a spacer gif as "content" and the image you want to show as a CSS background image, then users without CSS don't see the content you intended.

<figure> doesn't matter much in this question, it's the image that is relevant. If you have a content image, it should be in <img>.

Answered almost 3 years ago by zcorpan
  • Also, you shouldn't use the same alt text as the figcaption (you should use figcaption rather than p as Tony said). That will just repeat the same text twice for users with images disabled. zcorpan almost 3 years ago