> For the complete documentation index, see [llms.txt](https://matteo-gabriele.gitbook.io/vue-progressive-image/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matteo-gabriele.gitbook.io/vue-progressive-image/image-as-background.md).

# Image as background

To maintain all the functionalities of the plugin in the case of images that are part of an element background, you can use the `object-cover` attribute; this will allow the image to fit the size of the parent using the `object-fit: cover` CSS property.

The image will be centered and cropped to fit the parent element size.

```html
<template>
  <header class="header">
    <ProgressiveImage
      object-cover
      src="https://picsum.photos/id/1080/1980/1080"
    />
  </header>
</template>

<style>
.header {
  width: 100%;
  height: 500px;
}
</style>

```