Hello everyone, I recently encountered a problem. I'm trying to set a video background to my site, but the centered text runs all the way to the bottom, I don't know why, yet the navigation bar is fine. I've done a lot of research but can't find a solution.
For CSS, I made the following settings:
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: TESLA Regular; } .hero{ width: 100%; height: 100vh; background-image: linear-gradient(rgba(12,3,51,0.3)); position: relative; padding: 0 5%; display: flex; align-items: center; justify-content: center; } nav{ width: 100%; position: absolute; top: 0; left: 0; padding: 20px 8%; display: flex; align-items: center; justify-content: space-between; } nav .logo{ width: 150px; } nav ul li{ list-style: none; display: inline-block; margin-left: 40px; } nav ul li a{ text-decoration: none; color: #fff; } .content{ text-align: center; } .content h1{ font-size: 160px; color: rgb(110, 57, 57); font-weight: 600; transition: 0.5s; } .content h1{ -webkit-text-stroke:2px rgb(212, 28, 28) ; color: transparent; } .back-video{ position: absolute; right: 0; bottom: 0; z-index: -1; } @media (min-aspect-ratio: 16/9){ .back-video{ width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9) { .back-video { width: auto; height: 100%; } } > 对于HTML，我做了以下设置
Document Gaming is not a crime!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Yes, it is possible to add a video as a background using HTML and CSS.
1) Add the video tag and video reference in the HTML file as follows:
2) Set the width and height to 100% to cover the entire window and use position fixed to set the video as background. You may encounter visibility-related issues, but these can be solved using z-index and background overlay effects.
#myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }