「背景画像をブラウザいっぱいに表示しているCSS記述方法」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#contents
*背景画像をブラウザいっぱいに表示しているCSS記述方法
ＣＳＳだけでも背景画像をブラウザいっぱいに表示させる事は可能なのですね。~
今日はその事について書いていこうと思います。~
下のようなページを作っていきます。~
#image(width=400,全画面表示.png)
この画面の中で、Ctrl+スクロールしていくと背景の画像は固定されたままwrapper部分(コンテンツ部分)のみが拡大縮小していきます。~
以下のような画面になっていきます。
また、この背景に使われている画像はここのリンクより使わせていただきました。~
http://sozaing.com/photo/%e6%a1%9c%e3%82%a4%e3%83%ab%e3%83%9f%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3.html
それでは、実際に作っていきましょう。~
まずは、body部分のCSS記述から説明していきます。
ＣＳＳ
body {
/* 画像指定、imagesというフォルダ(ＣＳＳと同じ位置に作ったフォルダ)に入っている*/
background-image: url(images/sakuraillumi150404.jpg);
/* 画像を常に上下左右の中央に配置させる */
background-position: center center;
/* 画像を繰り返し表示しない */
background-repeat: no-repeat;
/* ページなどのコンテンツの高さが画像の高さより大きい時動に固定する */
background-attachment: fixed;
/* 画面、ブラウザのサイズに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が表示されるまでの間に表示される(待機中に表示される)背景のカラー */
background-color: #000000;
}
これで主要ブラウザでは全て画像が全画面で表示されます。~
上のプロパティの中でもあまり親しみのないbackground-position、background-attachment、background-sizeについて解説していきます。
background-position
背景画像の表示開始位置を指定するプロパティであり、値には％や数値、上のようにcenter、left、rightや
top、center、bottomなどを使う。横方向、縦方向の順で使う。
background-attachment
画面がスクロールされるとき、背景がそのまま固定されている(値 fixed)か、移動するか(scroll)を指定できる。
backgound-size
背景画像のサイズを指定する。横、縦の順で値を指定するが、値を指定しなかった場合はautoとなる。
値はauto(自動算出される)、contain(縦と横の比を維持したまま背景に収まりきる最大のサイズになるように画像を拡大縮小させる)、
cover(縦と横の比を維持したまま背景を完全に覆う最小のサイズになるように画像を拡大縮小させる)、％(背景 に対する画像の幅と高さの％を指定できる)、
長さ(画像の幅と高さをそれぞれ指定できる)がある。
*背景画像をブラウザいっぱいに表示しているページをレスポンシブウェブデザインする-リスト
#contents
*背景画像をブラウザいっぱいに表示しているCSS記述方法
ＣＳＳだけでも背景画像をブラウザいっぱいに表示させる事は可能なのですね。~
今日はその事について書いていこうと思います。~
下のようなページを作っていきます。~
#image(width=400,全画面表示.png)
この画面の中で、Ctrl+スクロールしていくと背景の画像は固定されたままwrapper部分(コンテンツ部分)のみが拡大縮小していきます。~
以下のような画面になっていきます。
#image(width=400,スクロール.png)
また、この背景に使われている画像はここのリンクより使わせていただきました。~
http://sozaing.com/photo/%e6%a1%9c%e3%82%a4%e3%83%ab%e3%83%9f%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3.html
それでは、実際に作っていきましょう。~
まずは、body部分のCSS記述から説明していきます。
ＣＳＳ
body {
/* 画像指定、imagesというフォルダ(ＣＳＳと同じ位置に作ったフォルダ)に入っている*/
background-image: url(images/sakuraillumi150404.jpg);
/* 画像を常に上下左右の中央に配置させる */
background-position: center center;
/* 画像を繰り返し表示しない */
background-repeat: no-repeat;
/* ページなどのコンテンツの高さが画像の高さより大きい時動に固定する */
background-attachment: fixed;
/* 画面、ブラウザのサイズに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が表示されるまでの間に表示される(待機中に表示される)背景のカラー */
background-color: #000000;
}
これで主要ブラウザでは全て画像が全画面で表示されます。~
上のプロパティの中でもあまり親しみのないbackground-position、background-attachment、background-sizeについて解説していきます。
background-position
背景画像の表示開始位置を指定するプロパティであり、値には％や数値、上のようにcenter、left、rightや
top、center、bottomなどを使う。横方向、縦方向の順で使う。
background-attachment
画面がスクロールされるとき、背景がそのまま固定されている(値 fixed)か、移動するか(scroll)を指定できる。
backgound-size
背景画像のサイズを指定する。横、縦の順で値を指定するが、値を指定しなかった場合はautoとなる。
値はauto(自動算出される)、contain(縦と横の比を維持したまま背景に収まりきる最大のサイズになるように画像を拡大縮小させる)、
cover(縦と横の比を維持したまま背景を完全に覆う最小のサイズになるように画像を拡大縮小させる)、％(背景 に対する画像の幅と高さの％を指定できる)、
長さ(画像の幅と高さをそれぞれ指定できる)がある。
*背景画像をブラウザいっぱいに表示しているページをレスポンシブウェブデザインする-リスト
