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 .uk-cover-background class to a <div> element with a background image.

Example

Markup

<div class="uk-cover-background">...</div>

Video

To create a video that covers its parent container, add the .uk-cover-object class to a video. Wrap a container element around the video and add the .uk-cover class to clip the content.

Example

Markup

<div class="uk-cover">
    <video class="uk-cover-object" width="" height="">
        <source src="" type="">
    </video>
</div>

Iframe

To apply the Cover component to an iframe, you just need to add the data-uk-cover attribute to the iframe. Now you only need to add the .uk-cover class to a container element around the iframe to clip the content.

Example

Markup

<div class="uk-cover">
    <iframe data-uk-cover src="" width="" height="" frameborder="0" allowfullscreen></iframe>
</div>

Responsive

To add responsive behavior to your cover image, you need to add the .uk-invisible class to an <img> element and place it inside your cover element. That way it will adapt the responsive behavior of the image.

NOTE Adding the .uk-height-viewport class from the Utility component will stretch the height of the parent element to fill the whole viewport.

Example

Markup

<div class="uk-cover-background">
    <img class="uk-invisible" src="" width="" height="" alt="">
</div>

Video

To add the same behavior to a video, you also need to add the .uk-position-relative class to the cover container and the .uk-position-absolute class to the cover object. The same applies to iframes.

Example

Markup

<div class="uk-cover uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <video class="uk-cover-object uk-position-absolute" width="" height="">
        <source src="" type="">
    </video>
</div>

Position content

You can also position content absolutely on top of the covering element. To do so, just add the .uk-position-cover class from the Utility component to a container element after your image or video. If you want to center the content vertically and horizontally, just use the Flex component.

Example

Bazinga!

Markup

<div class="uk-cover-background uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">...</div>
</div>