背景画像を画面いっぱいに合わせるには?

Pocket

デザインヒント
iphone-500291_640

「トップページを画面全体に合わせたい」でも変な隙間ができちゃう…。そんなことありませんか?

スマホとPCでは比率が違うため、全く同じ見せ方は出来ないものの、画面全体に合わせることは可能です。

方法はいろいろあると思いますが、簡単に設定できる方法をひとつご紹介します。

準備

・背景画像
・html
・css

htmlの書き方

背景画像を設置したい個所を


<div id="home">ここにはコンテンツ<div>

としてください。
id名はお好きなものを。今回はhomeにしました。

cssの書き方

html,body {
width: 100%;
overflow-x: hidden;
margin:0;
}
#home {
background: url('../images/home-bg.jpg') 50% 0 repeat-y fixed;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
text-align: center;
}

となります。

「背景画像で画面全体を覆う」ために必要な要素ですので、省略せずに使った方がエラーが少ないと思います。

→デモをみる

今回の画像の場合は、スマホで見た時に画面高さに合わせて表示されるため、このままでは画像の中央部分が切り出されたような状態になってしましたましたので、調整してみます。

→デモをみる

画像の開始位置について(background-position)

background-positioは、いくつかの方法で設定が可能です。

background-position : center center; キーワードで指定する
background-position : 60% 10%; %で指定する(それぞれ上下・左右の設定)
background-position : 0 30px; pxで指定する(それぞれ上下・左右の設定)
さて、今回スマホ用に「開始位置を調整したデモ」は上記とは別のやり方をとっています。CSS3では上記の設定のほか、新たに「下から」「右から」の設定も出来るようになりました。

background-position: right -150px bottom 0px;

細かな調整がしやすくなって大変便利ですね。

cssの解説

html,bodyの指定  
width: 100%; 横幅はブラウザのウィンドウ幅に合わせるため
overflow-x: hidden; ウィンドウ横幅からはみ出さない為
margin:0; 画像との間に隙間を作らない為
#homeの指定 背景画像を指定するBOXのid名。
今回は#homeとしています。
background-size: cover; 画面の「横幅」を覆う
height: 100vh; 画面の「縦幅」
background-position: center center; 背景画像の開始位置指定
display: flex; Flexスタイルの指定 ※これで画面ぴったりに
align-items: center; Flex指定のひとつで、コンテンツを中央に
-webkit- -webkit- と書いてあるものはベンダープレフィックスといって、ブラウザ間の相違を無くす表記です

以上となります。あまり上手い説明が出来ていなかったかもしれません、ゴメンナサイ。

最後までお読みいただき有難うございました。

Sponserd Links

Midori Design Works © 2016 All Rights Reserved.

Midori Design Works ミドリデザインワークス