eric.chenchao's sandbox: Background image (sandbox)

Background image formatter is used for image field. It outputs original image as background image in the field item div wrapper and put a transparent image with exactly the same size as a placeholder. This allows user to display a image when they want to use 'background-size' feature of CSS in a responsive theme. This is useful when you want to display a image with fixed height and fluid width.

As most of code is borrowed from image formatter, so its formatter settings is same as that of image formatter.

There is a similar module called background_image_formatter Project Project. But there is slight difference between them. This is module provides a placeholder transparent image to make it work well in the responsive theme. The use case for this module is display hero image in responsive theme when you want to use "background-size" for this hero image in CSS.

By using this formatter, we can get HTML output as below:

<div class="field field-name-hero-image field-type-image field-label-hidden">
  <div class="field-items">
    <div class="field-item even">
      <div class="image-placeholder" style="background-image: url(http://mywebsite.com/sites/default/files/styles/hero_image/public/images/hero_image.jpg?itok=4lulAnsK)">
        <img style="height: 1326px; width: 1920px;" typeof="foaf:Image" src="/sites/all/modules/custom/background_image/transparent.png" />
      </div>
    </div>
  </div>
</div> 

You can make image with fixed height and full width by adding the following CSS for example:

.field-name-hero-image {
  display: block;
  width: 100%;
}

.field-name-hero-image .image-placeholder {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}