前提・実現したいこと
top.mp4の背景余白を無くして画面いっぱいにしたいです。
100vhを実装したい。
発生している問題
該当のソースコード
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="wrapper"> <div class="video-wrap"> <video src="top.mp4" class="video" loop autoplay muted></video> </div> <div class="landing-text"> <h1>Video Landing Page</h1> <h3>Full Screen Video Background</h3> <a href="#" class="btn">Start Here</a> </div> </section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique ratione hic. Eum rerum praesentium consequatur reiciendis odit expedita sunt aut doloremque velit neque repudiandae natus, sapiente eos nesciunt nulla?</p> </body> </html>CSS
*{
margin: 0;
padding: 0;
}
.video-wrap{
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.landing-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
text-align: center;
}
h1{
font-size: 60px;
}
h3{
font-size: 20px;
padding: 20px;
}
p {
text-align: center;
padding: 30px;
}
.btn{
text-decoration: none;
border: 1px solid #fff;
padding: 20px;
color: #fff;
display: inline-block;
border-radius: 5px;
font-weight: bold;
}
.btn:hover{
color: #000;
background: #fff;
}
回答2件
あなたの回答
tips
プレビュー