cssでvideoをfixedの全画面背景にして、そこにbackgroudの背景画像を設置する方法

web制作

読了の目安時間: 136

videoタグで全画面いっぱいにしたレイアウトを作っていた時の備忘録で、videoの映像に対して、透過グラデーションや、網掛けの背景画像を設置した時の方法を参考までに晒しておきます。

今更な内容だし、色んなやり方があると思いますが、本記事では、とりあえずcssだけでやるカンタンな方法を紹介します。

cssでvideoをfixedの全画面背景にして、そこにbackgroudの背景画像を設置する方法

ソースコード

ソースコードはこちらです。

ソースコードの説明

まず、「position:fixed;」で、videoの映像を流すエリアを全画面表示します。

それから「position:fixed;」で全画面に広げた要素に対して背景画像を設置するためには、疑似要素「after」を使って、「position:absolute;」の絶対中央配置で設置すればOKです。

relativeがないのに、なぜabsolute?という感じですが、absoluteは、その上位要素にrelativeがない場合は、ルート最上位が親要素となります。(ブラウザウィンドウサイズに対してabsoluteとなる。)

リサイズ対応するならjs・jqueryを利用する

ただ、上記の書き方では、ブラウザウィンドウを拡縮した際、そのリサイズ追従が完ぺきではありません。ブラウザウィンドウを拡縮した際、そのウィンドウの横幅もしくは縦幅に併せて自動的に調整したい場合は、jsおよびjqueryを利用してください。

リサイズについては、下記の記事が参考になるかと思います。

▼div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる方法
http://kiyotatsu.com/div_height_resize_auto/

最後に一言

ひさしぶりの制作記事でした。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

cssでvideoをfixedの全画面背景にして、そこにbackgroudの背景画像を設置する方法


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

follow us in feedly

WEB制作をやっているYoshiと申します。PVは月間10万程度。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。