ふろしき Blog

コンテンツサービスを科学する株式会社ブートストラップ代表のブログ

1300の優良サイトが選んだ「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」対策ライブラリ集

1300の優良サイトを調査してみたシリーズ、第10回は「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」です。

背景にフルスクリーンの状態で画像を表示させるには、独特なノウハウを必要とします。この対策への呼び名は日本にはまだ輸入されていませんが、海外だと「Full Screen Background Image」と呼ばれています。

CSS2のみでも対策は可能です。以下が、その記述方法です。

▼ CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}
#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

▼ HTML

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

ただし、ライブラリを使えばノウハウが無くても対策が可能です。ふろしき.jsの調査では、1300中18サイト(1.38%)にてライブラリによる対策が確認されました。

jQuery MaxImage (12件 - 0.92%)

f:id:furoshiki0223:20131023000012p:plain
背景画像をフルスクリーン化させるだけでなく、スライダーとしても機能します。

jQuery Backstretch (6件 - 0.46%)

f:id:furoshiki0223:20131023000157p:plain
背景画像をフルスクリーン化させます。

最後に

ノウハウが多いとはいえ、やろうと思えばやれてしまう気軽さが悩みどころですね。JSライブラリは、なんだかんだ言っても、ロード時間を遅らせますからね。

このブログの筆者について

川田 寛

コンテンツサービスの開発や運営代行を専門とする集団「株式会社ブートストラップ」の社長です。ネットではふろしきと呼ばれています。

2009年にNTTグループへ新卒入社し、ITエンジニアとしてクラウド技術・Web技術の研究開発と技術コンサルティングに従事。2015年よりピクシブに入社し、エンジニアリングマネージャー・事業責任者・執行役員CCOなど、様々な立場からコンテンツサービスの事業づくりに関わりました。2021年にメディアドゥへVPoEとしてジョインし出版関係の事業に関わったのち、2023年に独立しています。

関わってきたインターネット事業としては、ECサービスのBOOTH、UGCプラットフォームのpixiv(主に海外展開)、制作ツールのpixiv Sketch、VR・VTuber関連ではVRoid、Wikiサービスのピクシブ百科事典など、10を超える多様なCtoCコンテンツサービス。また、NTTドコモのすご得コンテンツ、メディアドゥのWeb3サービスであるFanTopなど、いくつかのBtoCコンテンツサービスにも関わってきました。

幸運なことに、私はコンテンツに関係する幅広いインターネットサービスのテクノロジー&ビジネスの知識を得ることができました。これを日本のコンテンツ発展に役立てたいと思い、株式会社ブートストラップを創業しました。

このブログでは現在、出版社やIPホルダー、ライセンサーといったコンテンツに関わる人々に向けて、インターネット事業に関するTipsや業界内のトレンドなどの情報を発信しています。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム