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

Questions

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

March 12, 2022

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>

>Solution :

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>