下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する
下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定するには？
お世話になります。css初心者です。
このサイトみたいに、http://www.blackcatpedals.com/pedal_od_1.html
(1)ヘッダー部分のデザインがコンテンツ部分にまで関わっている（参考サイト→top左上のエフェクター写真みたいなデザイン）
(2)コンテンツ枠の背景（参考サイト→情報が表示される部分＝中央白部分／両サイドに暗い壁のような背景）をtopから表示させ、情報量でheightが可変してもコンテンツ枠全体が違和感なく表示されている
といったデザインのwebサイトを制作したいと考えています。
自分は全体の背景を#bodyにbackground-image no-repeatで表示していますが、#contensのbackground-colorを指定すると、ヘッダーからコンテンツ部分にまで関わっている上部のデザインが塗りつぶされてしまいます。
かといって、background-colorを指定しないと、背景が切れてしまいレイアウトが崩れます。これを解決するにはどうしたらよいのでしょうか？
参考サイトはどのようにcssを組んでいるのでしょうか？
どなたか教えてください、よろしくお願いします。
お礼
とーっても助かりました！！！ 他にもいろいろと疑問だったことが全て解決しそうです。 ありがとうございました。