backgroundって要は壁紙なのでです。
だから高さとか幅の概念が無いのですよね。
結果的に
div {
background: url(image.jpg);
}
と書いても何も表示されない。
要素内に何もないから。
で、
div {
background: url(image.jpg);
width: 100%;
height: 50px;
}
とかやる必要が出てくる。
しかしこれもまた問題が生じる。
ブラウザの幅を狭めても縮小されないため、右側が切れてしまうのである。
画像じゃなくて壁紙なのだから。
で、
div {
background: url(image.jpg);
background-size: contain;
width: 100%;
height: 50px;
}
とする。
これで完璧か、と思いきやこれでも困ったことになる。
ウィンドウの幅を狭めると確かに画像も縮小するのだけど、高さは広げても狭めても50pxのままになってしまう。
とまあbackgroundってのは困った作りになっているのですよ。
その上にテキストを乗っける時とか使いがちだけど、場合によってははみ出るのでimgの上にabsoluteで乗っけるなどの対策を取ったほうが安心できますね。
cssは色々な書き方がある分トラップも多いのでお気をつけてくださいませ。