body指定したimgが複雑なデザインでレイアウト

Question

お世話になります。
現在作成しているサイトに関しての質問です。
bodyにbackground-image指定である画像を配置しています。
それはよくあるデザインレイアウトの仕方だと思いますが、問題はデザイン的な要素がdiv#contens部分（#leftmenuや#rightmenu含む）の領域まで影響しているということです。（※添付画像参照）
デザイン的にdiv#headerの領域を中心としたデザインなので、うまく上下のバランスをとってrepeat-yすることもできません。
このIMGのheightを2500pxほどの大きな画像にして配置していました。そうするとPCで閲覧した時は、問題なく見れますが、iPadやスマートフォンで閲覧すると背景のみ大幅に縮小されて表示されレイアウトが崩れます。
かといってheightをiPadやスマートフォンで普通に閲覧できるサイズの1024pxにすると、当たり前ですが今度はコンテンツの途中で画像が切れます。ちょっとボリュームのあるページで画像が切れます。
コンテンツ部分の背景は白なので、div#contensにbackground-color指定することも考えましたが、そうするとbodyのbackground-imageの上に白がのってきてやはり見栄えが悪いです。

いろいろ手を尽くしましたし、検索したりしましたが、どうしてもいい解決策がありません。
bodyにbackground-imageをrepeat-yさせずに、それでもdiv#contensに情報量に応じて背景を可変させたい場合、何かいい方法はあるのでしょうか。恐らく考え方自体を全く新しい方法を取らなければならないかと思いますが、どうかご教授ください。うまく説明できたか自信がありませんが、よろしくお願いします。

naokita · Accepted Answer

後半の可変とかの意味が良く分からないけど、コンテンツの上部の両脇に画像を配置したいって事ですね？ body,h1,h2,p,ul,li{ margin:0; padding:0;} body,#header,#contens{ background-color: white;} #AA { width:900px; /* ←BBの絵の画像の幅と同じに */ margin:0 auto; padding-bottom:1em; background: url(黄色画像.gif) repeat-y; } #BB { background: url(絵の画像.gif) no-repeat; /* ↓↓ BBの画像に合わせheader,contensの位置調整 */ padding: 40px 0 20px 150px; } つまり、

　～　～ bodyに上げても良いが、狭くすると黄色画像がズレるからその対策をすれば、bodyに配置する方法でも良い。画像は、両方とも透過gifを利用し、 AAの黄色画像とBBの絵の画像の黄色い部分の左からの座標と、黄色い部分の幅は同じにする事。 -------------------- ＞このIMGのheightを2500pxほどの大きな画像にして配置していました。そんなアホな事をしてはいけませんｗ

body指定したimgが複雑なデザインでレイアウト

後半の可変とかの意味が良く分からないけど、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング