【karasu様】背景画像の設定について

トップのメイン画像に指定した背景画像を重ねたい。
具体的には、添付写真の青線までがメイン画像でその背景として赤点線の背景を重ねたいと思っていますがうまくいきません。
メイン画像を指定している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;
}

今後のカスタマイズの参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。