'Can't change the background behind a text, in which a video is playing inside it

I have made a text inside which a video is playing. I can't change the background, behind the text, to something different that white color. I would like to add a photo as a background instead of white color. I am using tailwind css. Does someone know how to do that?

    <div class="container grid">
      <div
        class="absolute flex justify-center items-center overflow-hidden w-full h-screen"
      >
        <video
          class="absolute top-0 left-0 object-cover w-full h-full"
          autoplay
          muted
          loop
          src="../img/barber.mp4"
          type="video/mp4"
        ></video>
        <h1
          class="absolute top-0 left-0 text-[25vw] text-center text-[#000] leading-[100vh] bg-[#fff] mix-blend-screen w-full h-full"
        >
          BARBER
        </h1>
      </div>
    </div>
htmlcssvideotexttailwind-css


Solution 1:[1]

Tailwind isn't intended to do everything CSS can do. It provides color gradients, but it doesn't sound like that's what you want. Just use some custom styling to apply your background image to the heading element.

<style>
h1.fancy-bg {
  background-image: url(https://via.placeholder.com/800);
  background-size: cover;
  background-position: center;
}
</style>

<div class="container grid">
  <div
    class="absolute flex justify-center items-center overflow-hidden w-full h-screen"
  >
    <video
      class="absolute top-0 left-0 object-cover w-full h-full"
      autoplay
      muted
      loop
      src="../img/barber.mp4"
      type="video/mp4"
    ></video>
    <h1
      class="absolute top-0 left-0 text-[25vw] text-center text-[#000] 
        leading-[100vh] bg-[#fff] mix-blend-screen w-full h-full fancy-bg"
    >
      BARBER
    </h1>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood

Related Questions