CSSで背景を多重化する方法

解決済

質問者：gogoyamada
質問日時：2010/11/28 03:36
回答数：3件

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のように明示的に高さを指定してやるとそれらしくは
なったのですが、高さは可変なので使えませんでした。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： ORUKA1951
回答日時：2010/11/28 11:10

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

div.column div div{background:none;}
を追加しておく(場所はどこでもよい)。
カスケーディングを理解するには、詳細度を考えること。
<style type="text/css">

</style>

- 0
- 件

通報する

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2010/11/28 10:27

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">

</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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： noris02
回答日時：2010/11/28 05:03

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

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>
</div>
</body>

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

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