# 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>