さぁ!検索しよう!

どのデバイスから見ても、画面いっぱいに背景画像が表示されるようにする方法を紹介します。

下記のサイトのようなものです。

イメージ33655
http://www.ringle39.com/

DEMO

HTML

<div>
  <nav>
    <ul>
      <li>Blue pond</li>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

ポイント

背景画像は<div></div>に適用します。

CSS

* {
  margin: 0;
}

div {
  background: url(http://tsukulog.net/wp-content/uploads/2015/04/6-min.jpg) center/cover;
  height: 100vh;
  position: fixed;
  width: 100%;
}

ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

li {
  color: #fff;
  display: inline-block;
  font-size: 24px;
  padding: 10px 20px;
}

li:first-child {
  font-size: 32px;
  margin-right: 20px;
}

ポイント

background: url(http://tsukulog.net/wp-content/uploads/2015/04/6-min.jpg) center/cover;

常にdiv要素の中央を基準に配置された状態で、縦横比を保持しつつ要素の縦横領域全体を覆いながら、ウィンドウサイズの変化に応じて拡大縮小表示されます。

height: 100vh;
width: 100%;

div要素のサイズが画面全体と等しくなります。

%は直近の親要素若しくは親要素が無ければhtml,body要素を基準にサイズが算出されますが、vh(vw)はviewportつまりスクロールバーを含めたブラウザを基準にサイズが算出されます。

widthvwを指定してしまうと、幅がhtml,bodyを超えるので横スクロールバーが出現してしまいます。

参考文献