最近、様々なアプリ、Webサイト、iCloudやOS Xのログイン画面で見かける、背景画像をぼかしてその上に画像やテキストなどのコンテンツを表示する、若干視差効果のついたWebページを簡単に表示するサンプルコードをつくってみました。

See the Pen Synchronize the background image with img tag by digistate (@digistate) on CodePen.

やっていることはごく単純です。
ページを表示すると、中央に表示している画像(imgタグ)のURLを取得して、ページの背景画像(background-image)としてセットしているだけです。

使い方

HTMLにあるimgタグのsrc属性値(画像URL)をお好みの画像URLに差し替えるだけです、簡単！

<!-- https://unsplash.it/500/500?image=646を任意のものに変更 -->
<img src="https://unsplash.it/500/500?image=646" class="main-img" />

背景画像用(#main-bg)のCSSには、予めフィルタープロパティでぼかし(blur)と明るさ(brightness)を指定してあるので、お好みに応じて値は変更してください。

filter:blur(15px) brightness(85%);
-webkit-filter:blur(15px) brightness(85%);