CODEWITHSUNDEEP
htmlcssbackgroundtransparency
MrPublic
MrPublic

Reputation: 518

Video as Background Completely Covering Up Semi-Transparent Background Color

I am running into the problem of having a semi-transparent background color over a video background. Even though I set the z-index of the video less than that of the main page's z-index. The video appears as it should, although the background color that I have set does not appear at all, even though it is semi-transparent. Could someone please explain why this is happening, along with giving a solution to this problem? Note that when I remove the video background, the transparent background color functions as it should.

Here is the HTML:

<body class="text_background">
 <div id="nav_bar">
  <h1>Foo</h1>
  <ul>
   <li><a href="foo.html">Foo</a></li>
   <li><a href="bar.html">Bar</a></li>
   <li><a href="baz.html">Baz</a></li>
   <li><a href="qux.html">Qux</a></li>
  </ul>
 </div>
 <p>Foo Bar</p>
 <h2>Hello World</h2>
 <div>
  <video id="vid_background" autoplay loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
</body>

Here is the CSS:

.text_background {
 background-color: rgba(0, 255, 200, 0.5);
 z-index: 1;
}
#vid_background {
 position: absolute;
 top: 0px;
 left: 0px;
 min-width: 100%;
 min-height: 100%;
 z-index: -1;
}
#nav_bar ul, #nav_bar ul li, #nav_bar h1 {
 display: inline-block;
}
#nav_bar ul {
 float: right;
}
#nav_bar ul li {
 border: 1px solid black;
}
#nav_bar a {
 color: black;
}

Upvotes: 0

Views: 751

Answers (2)

Fadhil Ahmad
Fadhil Ahmad

Reputation: 1118

its because you cant decrease z-index from the body. so you must create new div tag and cover all page an make it fixed...
Here is the HTML:

<body>
 <div class="text_background">
 </div>
 <div class="content">
  <div id="nav_bar">
   <h1>Foo</h1>
   <ul>
    <li><a href="foo.html">Foo</a></li>
    <li><a href="bar.html">Bar</a></li>
    <li><a href="baz.html">Baz</a></li>
    <li><a href="qux.html">Qux</a></li>
   </ul>
  </div>
  <p>Foo Bar</p>
  <h2>Hello World</h2>
 </div>
 <div>
  <video id="vid_background" loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
</body>

Here is the CSS:

#vid_background {
 position: absolute;
 top: 0px;
 left: 0px;
 min-width: 100%;
 min-height: 100%;
 z-index: -2;
}
#nav_bar ul, #nav_bar ul li, #nav_bar h1 {
 display: inline-block;
}
#nav_bar ul {
 float: right;
}
#nav_bar ul li {
 border: 1px solid black;
}
#nav_bar a {
 color: black;
}
.text_background {
 background-color: rgba(0, 255, 200, 0.5);
 position: fixed;
 z-index: -1;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}
.content {
	z-index: 1;
}

Upvotes: 1

MrPublic
MrPublic

Reputation: 518

Moving the class specifier into a new <div> tag fixed the issue.

<body>
 <div class="text_background">
 <div id="nav_bar">
  <h1>Foo</h1>
  <ul>
   <li><a href="foo.html">Foo</a></li>
   <li><a href="bar.html">Bar</a></li>
   <li><a href="baz.html">Baz</a></li>
   <li><a href="qux.html">Qux</a></li>
  </ul>
 </div>
 <p>Foo Bar</p>
 <h2>Hello World</h2>
 <div>
  <video id="vid_background" autoplay loop>
   <source src="videos\foo.mp4" type="video/mp4">
  </video>
 </div>
 </div>
</body>

Upvotes: 0

Related Questions