html・cssで背景画像をウィンドウサイズと同じにしたい
2012/12/09
「background-size」を使えばOK。
考え方
背景画像のサイズをいじるには、大きく分けて3つある。
一つ目は、imgタグで100%指定。その上に文字を乗せれば疑似背景画像になる。
二つ目は、jqueryを使う。誰かがきっと公開してくれてるはず。
三つ目は、CSS3を使う。
一つ目は、imgタグで100%指定。その上に文字を乗せれば疑似背景画像になる
position・z-indexあたりが可能なはずだけど、コレをやる場合はpositionなどは正しく使うというのが絶対条件。
必要な要素が抜けてたりするとブラウザによっていろいろと変わる。
二つ目は、jqueryを使う。誰かがきっと公開してくれてるはず
便利っちゃ便利なんだが、他でもJqueryを使っていたりすると思わぬ干渉を受けて面倒なことになる。
それぞれのスクリプトを読めばわかるんだろうけど、読むのが面倒・読めないというなら避けた方が無難か。
三つ目は、CSS3を使う
ありがたいことに「background-size」ってヤツがいるのでそれを使う。
「background-size」のまとめ
Cssで背景画像のサイズ指定(background-size)