Archived topic
Background video / z-index
7 replies · Started by Jan on September 27, 2022
Hi David,
I'd like the background video to run behind the image. See link to relevant page below.
The CSS is as follows:
/* GP Background Video - Add styles */
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}The HTML embed code is:
<video loop="1" muted="" autoplay="" playsinline="" poster="https://domain.de/wp-content/uploads/Standbild_Quader_webgefaehrte_1zu10_640.png" class="background-video">
<source src="https://domain.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-vp9-chrome.webm" type="video/webm">
<source src="https://domain.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-hevc-safari.mp4" type="video/mp4">
</video>The image of the man sitting on the right is a background image of the first container.
How do I need to adjust the z-index (inner or outer) to make the image come forward?
Thanks,
Jan
Hi Jan,
We can't seem to access the link you provided. Can you check if it's correct and accessible?
Hi Fernando,
thanks for pointing this out. The link in the initial post should be working now.
Best,
Jan
Hi Jan,
Can you choose Pseudo elementas the selector for the background image?
Let me know when it's done so we can have another look :)
Done. I changed the selector to Pseudo Element
Try to add this CSS:
.header-top-border:before {
z-index: 2;
}Works perfectly well, Yin. Many thanks
No problem :)
