トップのメイン画像に指定した背景画像を重ねたい。
具体的には、添付写真の青線までがメイン画像でその背景として赤点線の背景を重ねたいと思っていますがうまくいきません。
メイン画像を指定しているCSSが
background: url(images/main2.jpg) no-repeat top center;
となっているので、複数の背景画像を指定できるようにこの部分を書き換えたら良いと思っているのですが、うまくいきません。
CSSだけの書き換えではダメなのでしょうか?そもそも変更箇所が間違っているのでしょうか?
ご回答頂ければ幸いです。
ご相談ありがとうございます。
返答が遅れて申し訳ありません。現在は希望通りになっているようですね。
ただ、現在の形だと2つの背景画像を設定する意味は無いかもしれません。
#wrapper {
width: 100%;
background-image: url(images/bg_content1.jpg);
background-repeat: repeat-x;
background-position: top 260px center;
background-size: 100% 365px;
}
でも十分でしょう。
他、”背景を2重にする”という考えに固執せず、外側のHTML要素に背景画像を設定するという考え方もあります。
例えば現在のHTMLにcontent-wrapperというcontentを囲うdivを設けます。
<div id="content-wrapper">
<div id="content">
・・・・
</div>
</div>
すると、CSSも最小限の記述で実装できます。
#content-wrapper {
background-image: url(images/bg_content1.jpg);
background-repeat: no-repeat;
background-position: 0px 30px;
background-size: 100% 365px;
}
今後のカスタマイズの参考にして頂ければ幸いです。

