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)

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい