質問: cssで背景を多重化する方法 cssでdivの中の背景を多重化したいと思いまして、 なんとかお知恵を拝借できればと思い投稿させていただきました。 やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。 こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。 【html】 テキスト・・・ 【css】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは なったのですが、高さは可変なので使えませんでした。 なんとかヒントいただけましたら助かります。 よろしくお願いします。
回答: うまくいってないのは親ボックスの位置指定だと思います。 div.parent { border:1px solid; //見やすくするために入れましたがそれだけ。 position:relative; width:300px; ←出来れば追加 top:0px; ←追加 left:0px; ←追加 } また、私は div を極力重ねないようにし、 (上のボックスのclassで指定したスタイルが悪さをする。また、みにくく、わかりにくくなってしまう) backgroud:url(・・・)をつかいませんでした。 (空のdivになる為、背景画像が表示されない。表示するにはdiv自体にサイズをつくらなきゃいけないくなる。ページ自体の負荷等考えだすと使うかもしれませんが、、) background でやる場合は、調べてみてください。 【css】 div.parent { border:1px solid; width:300px; position:relative; top:0px; left:0px;} div.bg_upper { position:absolute; top:0px; left:0px;} div.bg_lower { position:absolute; bottom:0px; right:0px;} 【html】 ! ! ・・・ text ・・・ ・・・