レスポンシブWEBデザイン 背景画像の高さを

レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。
“background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。

よろしくお願いします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/07/19 11:15

その場合は、

background-size:contain; /*横がはみ出しますが図は変形しない*/
もしくは、
background-size:100% 100%;/* 図を変形してあわせる */
ですかね。

なお、CSS3の機能ですからbackgroundの一括指定ではなく。background-sizeと個別に後から指定したほうが良いでしょう。
　後方互換を考えるならIMGで配置して、display:blodkと合わせて指定する必要があることもあります。
　そのあたりは臨機応変に

この回答へのお礼

アドバイス、ありがとうございます。
さっそく実践してみたところ、思い通りになりました。
ありがとうございました。
また、なにかありましたらよろしくお願いします。

お礼日時：2013/07/19 14:56

No.1 回答者： ORUKA1951 回答日時： 2013/07/18 23:51

＞高さはテキストの量に応じて調整する

では、何をされたいかがわかりません。

一括指定ではわかりにくいので
background-size:の値は、
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain( http://www.w3.org/TR/css3-background/#ltbg-sizegt )
　となっています。
　たぶん、<percentage> | auto ]{1,2} | cover | contain
のいずれかを期待されているのだと思います。

＞高さはテキストの量に応じて調整する
とは
・縦横比を変えずに横もしくは縦の狭いほうにあわせる。
・縦横比を変えずに横もしくは縦の長いほうに合わせて画面全体を覆う。
・要素の大きさに合わせて縦横比を変えて覆う。
・縦横いずれかのサイズに合わせて貼る
　のどれなのでしょう。

この回答への補足

ご返信、ありがとうございます。

すいません、表現がたしかにわかりにくいですね。
"background-size:cover"だと、ウィンドウサイズを縮小すると縦横均一に縮小されますが、それだと例えば、箇条書きテキストが5行あった場合、下2行（若しくは3行）がはみ出してしまうので、5行分ちゃんと入るように縦を長くしたいと思っています。
これでも表現厳しいかもしれませんが、上記の条件だと、

・縦横比を変えずに横もしくは縦の長いほうに合わせて画面全体を覆う。
・要素の大きさに合わせて縦横比を変えて覆う。

このふたつのどちらかなと思います。

なんともうまく表現できずに申し訳ありません。

よろしくお願いします。

補足日時：2013/07/19 10:10