読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【29:画面サイズいっぱいの背景画像】画面サイズに対応した背景画像を指定

f:id:seintoseiya:20150730181047p:plain
プロジェクトNo.29:画面サイズいっぱいの背景画像 - DEMO
ビジュアル重視のサイトでよく使われるテクニックです。

CSS

background-sizeをcoverにする

bodyに対してbackground-sizeをcoverにすることで、画面サイズに合わせて相対的に調整して表示してくれます。
center centerで画面の左右上下中心に画像が配置され、
no-repeatでタイル状の繰り返しなし、(一番大きいと想定する画面サイズより大きい画像を用意)
fixedはコンテンツの高さが画像の高さより大きい時、動かないように固定します。

上記を一行で書くと以下の様になります。

body {
  background: url(img/main.jpg) center center / cover no-repeat fixed;
}

モバイル用に小さい画像を用意する

ユーザビリティの観点から、モバイル用にサイズの小さい画像を用意して、
mediaクエリで振り分けしておくと良いでしょう。

@media only screen and (max-width: 767px) {
  body {
    background-image: url(img/main_mobile.jpg);
  }
}

全ソースはこちら

github.com

関連アプリ・書籍

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

ああしたい、こう変えたいが手にとるようにわかる CSS基礎