can tag in html5 be used for background images?

Question

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="car">
   <img src="img/car.jpg" alt="the car">
   <p>The car</p>
</figure>

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="car">
   <pre></pre> <!-- add image from css -->
   <p>The car</p>
</figure>

can I use figure tag like that?

Thanks a lot

Answer 1

The figure and figcaption elements are fairly specific in their semantic purpose. If you don't care for semantics, there is really not much of a reason to use them. Divs will work fine. Here is how figure should be used:

<figure>
  <img src="/image.jpg" alt="A description of what this image is">
  <figcaption>A description that may or may not describe the image specifically and accompanies content from within the article.</figcaption>
</figure>

edit: I should mention that a pre with a background is likely not how this is intended to be used and will not help people with screen readers at all. Bots for search engines may respond differently as well, which could be a negative for you.

Answer 2

Your use case is why object-fit was created.

img {
    object-fit: cover;
}

See this stackoverflow question.

Answer 3

Depends on your purpose. If it is for decoration only, sure! Otherwise "is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience." WCAG 2.0 Techniques for CSS

Many developers ignore this, since a solution is often more complex than simply not worrying about accessibility issues. Steve Faulkner's article on high contrast proof CSS sprites goes into this in further detail.