Cover

Expand images or videos to cover their entire container.

This component allows you to create fullscreen teasers using images, objects or even iframes. Regardless what kind of element, it will always be centered vertically and horizontally and cover its container without losing its proportions. You can also place additional content, like text or an image, on top of the image or video.


Usage

The Cover component is applied differently, depending on whether you are using a background image, an object or an iframe. The simplest way is to add the .cover-background class to a <div> element with a background image.

Usage

  • Class Description
    .cover Main component class. These prevents children from overflowing.

    Sub Objects

    Class Description
    .cover-background Centers and stretches the background image to the size of the container using the CSS background-size: cover;.
    .cover-object Stretches the element to the size of the parent .cover element.
  • <div class="cover" style="height: 300px;">
        <div class="cover-background cover-object" style="height: 450px; background-image:url(sample.jpg);">
            ...
        </div>
    </div>

On Iframes

To apply the Cover component to an iframe include the cover.js file in your document and add the data-cover attribute to the iframe. This will update the width and height attributes of the iframe to that of the element itself, expanding the video.

Usage

  • <div class="cover" style="height: 300px;">
        <iframe data-cover src="images/placeholder.svg" width="600" height="400" frameborder="0" allowfullscreen></iframe>
    </div>