css - コンテナーのコンテンツが小さい場合は背景画像を表示する (レスポンシブ)

Question

ボタンの背景としてブラシストロークを使用するレスポンシブサイト (Foundation 3 を使用) に取り組んでいます。1）画像をレスポンシブデザインの残りの部分に合わせて拡大縮小するのに苦労しています 2）コンテナのdivの大きさに関係なく、フルサイズの背景画像を表示します。

いくつかのスクリーンショット:

ブラウザが全幅の場合 - http://www.screencast.com/t/3Lu86fhnsZkk (私は新しいユーザーで画像を投稿できません)

ブラウザの幅が拡大する場合 - http://www.screencast.com/t/3Lu86fhnsZkk

CSS:

h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}

背景画像を 1) コンテンツが小さいにもかかわらずフルサイズで表示し、2) 応答性を維持するには、どのような方法がよいでしょうか?

score 1 · Accepted Answer

背景が属するコンテナに合わせて背景を作成するにはbackground-size、cover

h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}

コンテナー要素のサイズを変更すると、画像のサイズも変更されるため、幅/高さのパーセンテージ値を使用してコンテナー要素をレスポンシブにするか、メディアクエリを使用します。min-width と max-width を使用して、要素が小さすぎたり、幅が広すぎたりしないようにします。

1 に答える 1