カフェやインテリアショップ、アーティストのHPによく見る、背景画像がモニターいっぱいに表示されていて、スクロールすると画像の大きさが縦横比が固定されて、拡大縮小するレイアウトに今回は挑戦です。
※javascriptを使ってもできるのですが、今回の目標はCSSのみでの作成です。
もっともシンプルなやり方
1 | <!DOCTYPE HTML> |
2 | < html lang = "ja" > |
3 | < head > |
4 | < meta charset = "UTF-8" > |
5 | < title >背景画像を画面いっぱいに(サンプル1)</ title > |
6 | </ head > |
7 | < body > |
8 | < img class = "back" src = "img/back.jpg" alt = "背景サンプル画像" /> |
9 | < div id = "container" > |
10 | |
11 | < p >ここにコンテンツ</ p > |
12 | < p >ここにコンテンツ</ p > |
13 | < p >ここにコンテンツ</ p > |
14 | < p >ここにコンテンツ</ p > |
15 | < p >ここにコンテンツ</ p > |
16 | < p >ここにコンテンツ</ p > |
17 | < p >ここにコンテンツ</ p > |
18 | < p >ここにコンテンツ</ p > |
19 | < p >ここにコンテンツ</ p > |
20 | < p >ここにコンテンツ</ p > |
21 | |
22 | </ div > <!-- /#container --> |
23 |
24 |
25 | </ body > |
26 | </ html > |
ポイントは<body>のすぐ下に背景となる画像を指定すること。指定している画像のサイズを超えるディスプレイサイズになれば当然背景は荒れますが、今回は1000×710の画像を使用します。
1 | img.back{ |
2 | min-height : 100% ; |
3 | min-width : 1024px ; |
4 | width : 100% ; |
5 | height : auto ; |
6 | position : fixed ; /*absoluteを指定した場合背景画像もスクロール*/ |
7 | top : 0 ; |
8 | left : 0 ; |
9 | } |
10 |
11 |
12 | div#container{ |
13 | position : relative ; /*←ポイント!!*/ |
14 | background-color : #fff ; /*↓ここから下はcontainerのレイアウト*/ |
15 | margin : 60px auto ; |
16 | padding : 50px ; |
17 | width : 400px ; |
18 | border-radius: 20px ; |
19 | filter: alpha(opacity= 80 ); |
20 | -moz-opacity: 0.80 ; |
21 | opacity: 0.80 ; |
22 | } |
背景に指定する部分にposition:fix、コンテンツ部分にpositon:relativeの指定。
position:fixをabsoluteにすると、スクロールバーが出るので、用途によって使い分けましょう。
んで、できたサンプルがコレ!!
次は、背景画像の指定するプロパティのみで作成する方法
1 | <!DOCTYPE HTML> |
2 | < html lang = "ja" > |
3 | < head > |
4 | < meta charset = "UTF-8" > |
5 | < title >背景画像を画面いっぱい(サンプル2)</ title > |
6 | </ head > |
7 | < body > |
8 | |
9 | < div id = "container" > |
10 | |
11 | < p >ここにコンテンツ</ p > |
12 | < p >ここにコンテンツ</ p > |
13 | < p >ここにコンテンツ</ p > |
14 | < p >ここにコンテンツ</ p > |
15 | < p >ここにコンテンツ</ p > |
16 | < p >ここにコンテンツ</ p > |
17 | < p >ここにコンテンツ</ p > |
18 | < p >ここにコンテンツ</ p > |
19 | < p >ここにコンテンツ</ p > |
20 | < p >ここにコンテンツ</ p > |
21 | |
22 | </ div > <!-- /#container --> |
23 |
24 | </ body > |
25 | </ html > |
<img>を指定しない以外はさっきとほぼ同じですね。
1 | html{ |
2 | min-height : 100% ; |
3 | background : url (img/back 02 .jpg) no-repeat center ; |
4 | -webkit-background- size : cover; |
5 | -moz-background- size : cover; |
6 | -o-background- size : cover; |
7 | background- size :cover; |
8 | } |
9 | |
10 | div#container{ |
11 | background-color : #fff ; /*↓ここから下はcontainerのレイアウト*/ |
12 | margin : 60px auto ; |
13 | padding : 50px ; |
14 | width : 400px ; |
15 | border-radius: 20px ; |
16 | filter: alpha(opacity= 80 ); |
17 | -moz-opacity: 0.80 ; |
18 | opacity: 0.80 ; |
19 | } |
html自体に背景画像を指定してbackground-size:coverを指定します。
background-size:coverは、背景画像のサイズを指定するプロパティで、縦横比を固定して背景の領域を全体に覆って拡大・縮小してくれます。
んで、できたサンプルがコレ!!
javascriptで表示させるよりCSS1本の方がサクッと感はありますね。
2つ目の方法のほうが自分的にはいいんですが、IE7に未対応っていうのがネックですね・・・。
背景に素敵な写真が配置されれば、それだけでサイトがグッとオシャレになるので、覚えていて損はないテクニックです。どんどん表現の引き出しを増やしていこうと思う今日このごろ、本日はこの辺で。以上、@Kc_fujiでしたm(__)m