背景に画像を設定する場合は backgroundプロパティで画像をしてすれば設置できますが、動画を設定することができません。
videoタグとCSSで動画を背景に設置していきます。
背景を動画にしたサンプル
背景に動画を設定
Pixabayが提供するAntonio Lópezの動画
実装コード例
動画を背景にする時は、動画の上にコンテンツを重ねる形になります。
背景にしたい動画をvideoタグで設定、さらに動画の上に表示させたい内容も合わせて記述します。
そしてそれらを何かしらの要素で囲みます。
<div class="background_movie_wrap">
<video autoplay muted loop src="背景にしたい動画" class="background_movie"></video>
<p class="background_movie_text">背景に動画を設定</p>
</div>.background_movie_wrap {
position: relative;
overflow: hidden;
}
.background_movie {
opacity: .6;
}
.background_movie_text {
position: absolute;
top: 20%;
font-size: 30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
background: rgba(0,0,0,.6);
border-radius: 3em;
padding: 1em;
opacity: 1;
z-index: 10;
}このサンプルでは、表示させる内容と背景となる動画を囲んでいる要素に position: relative; と overflow: hidden; を指定します。
背景の上に表示させる位置を調整するために position: relative; 、動画がはみ出てしまった時に表示が崩れないよう overflow: hidden; を使っています。
動画要素には opacityプロパティで透過をかけて、テキストが目立つように。
動画の荒さを目立たせなくするためや装飾としてなど、何かしらフィルターをかけることも多いです。
背景に動画を設定
.blog_content-bg_movie_wrap {
position: relative;
overflow: hidden;
&.dot_filter::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
background-image: radial-gradient(#ddd 30%, transparent 31%), radial-gradient(#ddd 30%, transparent 31%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
}動画の上に重ねたいコンテンツは任意の位置にCSSで調整します。
カテゴリー : HTML-CSS
