Bulma video background with texture overlay - html

Question

Could someone tell me how I can have an overlay on a background video without over laying any of the other components?
So I want to have the components be visible and be on top of the everything else and then have the background video be all the way in the background and then the texture on top and everything on top of the texture.
Note: I'm using the Bulma Framework on WordPress.
I'm using all native Bulma classes aside from defining the following for the texture class:
.hero .texture {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:15;
background:url('/wp-content/themes/bulmapress/src/images/texture.png');
}
This is the code structure:
<div class="hero-head">
<div class="first_nav">
<header id="header" class="nav-down">
<nav id="site-navigation" class="navbar container" role="navigation">
<div class="navbar-brand">
<?php bulmapress_home_link('navbar-item'); ?>
<?php bulmapress_blog_description('navbar-item is-muted'); ?>
<?php bulmapress_menu_toggle(); ?>
</div>
<div class="navbar-menu">
<div class="navbar-start"></div>
<?php bulmapress_navigation(); ?>
</div>
</nav>
</header>
</div>
</div>
<section class="hero main_hero is-fullheight video">
<div class="texture"></div>
<div class="hero-video">
<video poster="" id="bgvid" playsinline autoplay muted loop preload="auto">
<source src="/wp-content/themes/bulmapress/src/images/compressed.mp4" type="video/mp4">
</video>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="slider-content animated zoomIn pb-6">
<div>
<p class="title is-1 main-text">Semirsmajlovic.com</p>
<p class="subtitle is-4 main-text">Website is under construction :)</p>
</div>
</div>
<span class="scroll-down animated zoomIn">
<svg
width="30px"
height="100%"
viewBox="0 0 247 390"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
"
>
<path id="wheel" d="M123.359,79.775l0,72.843" style="fill: none; stroke: #fff; stroke-width: 20px;" />
<path
id="mouse"
d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z"
style="fill: none; stroke: #fff; stroke-width: 20px;"
/>
</svg>
</span>
</div>
</div>
</section>
Picture for example:

Answer 1

To achieve this you should do some additional CSS work.
.hero.video {
position: relative;
}
.hero.video .texture {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
color: white;
}
.hero.video .hero-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.hero.video .hero-video video {
width: 100%;
height: 100%;
}
.hero.video .hero-body {
position: absolute;
}
If you like to add some elements in div texture you're good to go but make sure to add some styling to them as well :).
Hopefully this does the trick for you!