Schema.org give a div a itemprop="image"?

Question

I am replacing an image with a <div> with background-image for the reason of background-size: cover; The page is structured the same way as before with a image just that "the image" is a div now.

Does is makes sense to give that itemprop to a <div>?

Answer 1

CSS is not recognized by any Microdata parser that I'm aware of. You'll need to add a meta tag to specify the image like this:

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="image" content="bg.jpg"></meta>
  <div style="background-image:url('bg.jpg')"></div>
</div>

Answer 2

this is a good use for a meta tag within the containing div for your itemscope.

The two attributes you want in that meta tag are itemprop and content

<meta itemprop="image" content="/some/url/to/an/image.gif" />

You can verify that meta information is, in fact, read just fine by testing it here: http://www.google.com/webmasters/tools/richsnippets

Answer 3

Why not specify the img in the content and hide it with CSS if it needs to be seen in the DOM but manipulated visually as a background-image? Keeps the meta tags out of your body making it slightly more traditional in my eyes as well as retaining the default browser functionality users anticipate with images such as saving an image (menu tree on right click) and cursor highlighting, etc.

<div itemscope itemtype="http://schema.org/Article">

    <style scoped>
    /* I only use scoped to avoid excess classing in this demo.
       Read: http://caniuse.com/#feat=style-scoped */
      figure
      { position: relative;
        background-size: cover;
        background-position: center center }

      figure > img[itemprop=image]
      { opacity: 0;
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100% }

      .specific-image
      { background-image: url(/path-to/image.jpg);
        width: 300px; height: 150px }
    </style>

    <figure class="specific-image">
        <img itemprop="image" src="/path-to/image.jpg" width="150" height="150" alt="image">
    </figure>

</div>

Resource is only downloaded once since it's the same URL path, no additional HTTP requests.