【最大10000ポイント】当たる!!質問投稿キャンペーン!

CSSでdivの中の背景を多重化したいと思いまして、
なんとかお知恵を拝借できればと思い投稿させていただきました。
やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。
こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。

【html】
<div class="parent">
<div class="bg_upper">
<div class="bg_lower">
<div class="content">
テキスト・・・
</div>
</div>
</div>
</div>

【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;
}

<div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは
なったのですが、高さは可変なので使えませんでした。

なんとかヒントいただけましたら助かります。
よろしくお願いします。

「CSSで背景を多重化する方法」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (3件)

HTMLのマークアップは、あくまで文書構造に従うほうが良いです。

デザインを想定して付けていたらややこしくなるし、先でデザインを変えるとき整合性がとれなくなる。HTML,CSSの趣旨に反するし。

 たとえばコラム枠の背景に右上と左下に別の画像を置きたい場合・・

たとえば

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
div.column{ width:600px;border:solid 1px gray;}
div.column{ background:url(./img/top-left.gif) 0% 0% no-repeat;}
div.column div{ background:url(./img/bottom-right.gif) 100% 100% no-repeat;}
/* 率直にこれだけでよい */
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<div class="column">
<div>
<p>あいうえお</p>
<p>CSSでdivの中の背景を多重化したいと思いまして、</p>
<p>なんとかお知恵を拝借できればと思い投稿させていただきました。</p>
<p>やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。</p>
<p>こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。</p>
</div>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ばっちりできました!
ありがとうございます。
スマートな方法で、とても参考になりました。
おかげさまで心のもやもやがすっきりです!
まだまだ未熟ですが、一歩前進できました。
本当にありがとうございます!

お礼日時:2010/11/28 13:49

補足、divの下にまたdivを入れる可能性があれば


div.column div div{background:none;}
を追加しておく(場所はどこでもよい)。
カスケーディングを理解するには、詳細度を考えること。
<style type="text/css">
<!--
div.column div div{background:none;}
div.column{ width:600px;border:solid 1px gray;}
div.column{ background:url(./img/top-left.gif) 0% 0% no-repeat;}
div.column div{ background:url(./img/bottom-right.gif) 100% 100% no-repeat;}
/* 率直にこれだけでよい */
-->
</style>
    • good
    • 0

うまくいってないのは親ボックスの位置指定だと思います。


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】
<body>
<div class="parent">
<div class="bg_upper"><img src="../images/bg_tl.png" /></div>
<div class="bg_lower"><img src="../images/bg_br.png" /></div>
<div class="contents">
・・・ text ・・・<br /> ・・・
</div><!--end contents-->
</div><!--end parent-->
</body>
    • good
    • 0
この回答へのお礼

早々にお教えいただきましてありがとうございます。
確かにおっしゃる通りの方がわかりやすいですね。
大変勉強になりました。
ただ、やってみたのですが、ちょっとうまくいかず、
テキストが出なかったり下側の画像がつぶれたりと悪戦苦闘しております。
レベルがまだまだ低いので色々試して勉強させていただきたいと思います。
ありがとうございます。

お礼日時:2010/11/28 13:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング