Background

Display images or videos as a background

Movie

Banner

vue
<template>
 <Background
  video-src="/pexels/movie/3209211-uhd_3840_2160_25fps.mp4"
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  class="un-min-h-300px"
 />
</template>

Background

Transform Your Business

vue
<template>
 <Background
  video-src="/pexels/movie/3209211-uhd_3840_2160_25fps.mp4"
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Overlay

Transform Your Business

vue
<template>
 <Background
  video-src="/pexels/movie/3209211-uhd_3840_2160_25fps.mp4"
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  :overlay="true"
  overlay-color="pink-500"
  overlay-alpha="0.5"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Image

Banner

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  class="un-min-h-300px"
 />
</template>

Background

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Opacity

The img-opacity attribute supports 25, 50, and 75.

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  img-opacity="25"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="secondary"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Parallax

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  :img-parallax="0.1"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Overray

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  :overlay="true"
  overlay-color="pink-500"
  overlay-alpha="0.5"
 >
  <b-h
   level="1"
   margin="5"
   display-headings="1"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Clip

Diagonal

Transform Your Business

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  clip="diagonal-bottom-right"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  clip="diagonal-bottom-left"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Arc

Transform Your Business

vue
<template>
 <Background
  img-src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
  clip="arc-bottom"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Background Color

Theme Color

Transform Your Business

vue
<template>
 <Background
  background-color="primary"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

All Color

Transform Your Business

vue
<template>
 <Background
  background-color="blue-100"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

UnoCSS

Transform Your Business

vue
<template>
 <Background
  class="un-bg-gradient-to-br un-from-blue-800 un-to-blue-400"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>
 </Background>
</template>

Pattern SVG

Hero Patterns jigsaw

Hero Patterns Squares

Hero Patterns Boxes

Hero Patterns Groovy

vue
<template>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/jigsaw.svg"
  margin="b-3"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns jigsaw
  </b-h>
 </Background>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/squares.svg"
  margin="b-3"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Squares
  </b-h>
 </Background>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/boxes.svg"
  margin="b-3"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Boxes
  </b-h>
 </Background>
 <Background
  class="un-bg-gradient-to-t un-from-purple-700 un-to-purple-400"
  pattern-src="/hero-patterns/groovy.svg"
  :pattern-opacity="0.1"
  margin="b-3"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Groovy
  </b-h>
 </Background>
</template>

Parallax

Hero Patterns jigsaw

Hero Patterns Squares

Hero Patterns Boxes

Hero Patterns Groovy

vue
<template>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/jigsaw.svg"
  margin="b-3"
  :pattern-parallax="0.1"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns jigsaw
  </b-h>
 </Background>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/squares.svg"
  margin="b-3"
  :pattern-parallax="0.1"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Squares
  </b-h>
 </Background>
 <Background
  background-color="purple-400"
  pattern-src="/hero-patterns/boxes.svg"
  margin="b-3"
  :pattern-parallax="0.1"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Boxes
  </b-h>
 </Background>
 <Background
  class="un-bg-gradient-to-t un-from-purple-700 un-to-purple-400"
  pattern-src="/hero-patterns/groovy.svg"
  :pattern-opacity="0.1"
  margin="b-3"
  :pattern-parallax="0.1"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Hero Patterns Groovy
  </b-h>
 </Background>
</template>

Custom SVG

Transform Your Business

vue
<template>
 <Background
  background-color="primary"
 >
  <b-h
   level="3"
   margin="5"
   display-headings="4"
   text-color="white"
  >
   Transform Your Business
  </b-h>

  <template #shape>
   <figure class="position-absolute top-0 start-0 w-75">
    <svg
     xmlns="http://www.w3.org/2000/svg"
     x="0px"
     y="0px"
     viewBox="0 0 1246 1078"
    >
     <g opacity=".4">
      <linearGradient
       id="lg1"
       gradientUnits="userSpaceOnUse"
       x1="2073"
       y1="2"
       x2="2273"
       y2="1135"
       gradientTransform="matrix(-1 0 0 1 2600 0)"
      >
       <stop
        offset="0.4976"
        style="stop-color:#559bff"
       />
       <stop
        offset="1"
        style="stop-color:#377dff"
       />
      </linearGradient>
      <polygon
       fill="url(#lg1)"
       points="519,1 0,1 0,1078 863,1078   "
      />
      <linearGradient
       id="lg2"
       gradientUnits="userSpaceOnUse"
       x1="1717"
       y1="4"
       x2="1717"
       y2="644"
       gradientTransform="matrix(-1 0 0 1 2600 0)"
      >
       <stop
        offset="1.577052e-06"
        style="stop-color:#559bff"
       />
       <stop
        offset="1"
        style="stop-color:#377dff"
       />
      </linearGradient>
      <polygon
       fill="url(#lg2)"
       points="519,0 1039,0.6 1246,639 725,644   "
      />
     </g>
    </svg>
   </figure>
  </template>
 </Background>
</template>

See Also

Block

Heading-block

Fixed block