ブラウザを拡大縮小しても背景画面は同じ画像で見せるようにする。
ＣＳＳだけでも背景画像をブラウザいっぱいに表示させる事は可能なのですね。
今日はその事について書いていこうと思います。
下のようなページを作っていきます。
この画面を、Ctrl+スクロールしていくと背景の画像はいっぱいに表示されたまま
page部分(コンテンツ部分)のみが拡大縮小
していきます。
以下のような画面になっていきます。
上中央あたりに小さくなった黒い#page部分を確認することができると思います。
また、この背景に使われている画像はここのリンクより使わせていただきました。
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;
}
HTML5
<DOCTYPE! html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="#.css"> <title>nicepaper_sample</title> </head> <body> </body> </html>
これで主要ブラウザでは全て画像が全画面で表示されます。
以下のような画面になります。
上記CSSのプロパティの中でもあまり親しみのないbackground-position、background-attachment、background-sizeについて解説していきます。
background-position 背景画像の表示開始位置を指定するプロパティであり、値には％や数値、上のようにcenter、left、rightや top、center、bottomなどを使う。横方向、縦方向の順で使う。
background-attachment 画面がスクロールされるとき、背景がそのまま固定されている(値 fixed)か、移動するか(scroll)を指定できる。
backgound-size 背景画像のサイズを指定する。横、縦の順で値を指定するが、値を指定しなかった場合はautoとなる。 値はauto(自動算出される)、contain(縦と横の比を維持したまま背景に収まりきる最大のサイズになるように画像を拡大縮小させる)、 cover(縦と横の比を維持したまま背景を完全に覆う最小のサイズになるように画像を拡大縮小させる)、％(背景 に対する画像の幅と高さの％を指定できる)、 長さ(画像の幅と高さをそれぞれ指定できる)がある。
ここからwrapperとnavを加えて完成です。 HTML
<DOCTYPE! html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="#.css"> <title>nicepaper_sample</title> </head> <body> <div id="page"> <nav> <li> <ol><a href="#">Yahoo!</a></ol> <ol><a href="#">Google</a></ol> <ol><a href="#">msn</a></ol> <ol><a href="#">livedoor</a></ol> </li> </div> </body> </html>
CSS
charset: "utf-8";
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;
}
#page {
margin: 0 auto;
width: 1000px;
height: 630px;
background-color: #000000;
opacity: 0.8;
}
li {
width: 300px;
height:300px;
list-style: none;
font-size: xx-large;
}
a {
text-decoration: none;
color: #eeeeee;
display: block;
border: solid 2px #eeeeee;
padding-left: -10px;
}
