- ベストアンサー
CSSでの2つの背景画像指定
- WordPressでサイトを運営していますが、現在の背景画像を残したままで新たに左側に20px幅程度の画像を上から下までfixedで付け足したいです。
- 現在のCSSタグに追加でbackground: url(images/追加画像) repeat-y fixed left top;を記述すると、最初の画像が消えてしまいます。
- 両方の画像を有効にするためには、どのような記述をすればいいでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
背景画像を付けたい要素(element)を特定できるようセレクタを指定します。HTMLはHTMLがちゃんとしていたら触る必要はない。 body{background:;} /* 詳細度1で、継承されない */ body div{background:;} /* 詳細度が2になるのでbodyより下位にある(子孫)のすべてのdivに適用される。詳細度2 */ body>div{background:;} /* 詳細度が2になるのでbodyの直接の子供のすべてのdivに適用される。孫には適用されない詳細度2 */ body div+div{background:;}/* 兄にdivがあるdiv要素に適用される。兄には適用されない 詳細度3 */ div[title=test]/* 属性(詳細度10)titleとその値にtestをもつdiv 詳細度11 */ div[title]/* 属性セレクタ(詳細度10)title属性をもつdiv 詳細度11 */ div:first-child {}/* 親要素の最初のdiv 擬似クラス 詳細度11 */ ・・・等等・・ ソースを見ていないのでピンポイントは無理ですが、HTMLがちゃんとしていたら、HTMLを書き直す必要はないはずです。 詳しくは、 セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) CSSの基本です。プロパティを覚えるより先に学ぶはず。
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
body{ background:#f0f0f0 url(images/背景画像) repeat;} #body2{ background: url(images/追加画像) repeat-y fixed left top;} <body><div id="body2"> <div id="wrap"> コンテンツ </div> </div></body>
- skuld777
- ベストアンサー率70% (7/10)
z-indexを使用したdivに追加画像を表示させたらどうでしょう。 http://www.htmq.com/style/z-index.shtml
補足
ご回答ありがとうございます。 上のCSSの部分はわかるのですが、 下のHTMLはどこに記述すればよいのでしょうか？ Wordpressですので、 ヘッダーPHP インデックスPHP シングルPHP 等々、各所に分かれているのでそこがわからないのです・・・・・