0

Im new to Tailwind, I have a video background page (based on that post https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/), I trying to add a pattern ( http://www.patternify.com/ ) on top of that video background. I was tried few different approaches but all of them makes strange things with position of the background.

Can someone show me how it should be done in Tailwind?

Oskar
  • 81
  • 4

1 Answers1

0

You can position an HTML over a video using relative and absolute utility classes like this example. The absolute div is wrapping the iframe video that you need. You can position the pattern that you need and change its size with width w-{size} and height h-{size}classes.

<div class="relative">
  <div class="relative h-20 w-20 left-40 top-24 z-10" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAGtJREFUKFNjZICCpkN+/+vsNjGCuMaZ1/4faYlg4BS+BOeDGYQUnZ2uxchIjCKQYWATcVkHMglmI043ISsCuZ0Rm8PRFYGt/v5W7z+y77ApAhmG4kZcinbVtkA8A9KBT5Gw1DKIGwkpAhkGAJGtf6rUDvXfAAAAAElFTkSuQmCC) repeat;"></div>
  <div class="absolute top-0 w-full">
    <iframe width="800" height="600" src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

You can take a look at the example in the next play. https://play.tailwindcss.com/QjG6jhiIdN

victoryoalli
  • 1,897
  • 2
  • 12
  • 11