2015.05.08

実は簡単!CSSで背景画像をフルスクリーンにする方法

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

full-screen

最近、フルスクリーンを使用したサイトをよく見かけるようになりました。「どーん」と大きな写真は、インパクトがあってはじめてアクセスしてきたユーザーに印象を残すことが出来ます。

けど、フルスクリーンにする方法って、色々と難しくって面倒臭いんじゃない?
いやいや意外と簡単で、CSSを何行が書き足すだけでOKです。

フルスクリーンのサンプルはこちら

それではフルスクリーンにする方法です。

CSSのみで背景画像をフルスクリーンにする方法

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フルスクリーンで表示する方法</title>
</head>
<body>
<div id="container">
ここにコンテンツ
</div>
</body>
</html>

CSS

html { 
  background: url(img/desert.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

補足

  • 「background-size:cover;」は縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小するCSS

対応ブラウザ

  • Safari
  • Chrome
  • IE 9以上
  • Opera 10以上
  • Firefox 3.6以上

参考にしたいフルスクリーンサイト

まとめ

フルスクリーンサイトはやっぱりクリエイティブな分野や業種には相性が良さそうなテクニックですね。逆にイメージが先行してしまい、「どんな会社?」みたいな印象を持たれるかも知れませんし、サイトを閲覧している人のディスプレイサイズも色々ですからフルスクリーンにする時には注意が必要かもしれません。

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

WEB制作

ソーシャルメディアでもご購読できます。

« »

トップ