- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：body指定したimgが複雑なデザインでレイアウト）
body指定したimgが複雑なデザインでレイアウト
このQ&Aのポイント
- bodyにbackground-imageを配置したとき、div#contens部分の領域まで影響してしまう問題が発生しています。
- PCでは問題なく表示されるが、スマートフォンやiPadでは背景が縮小されてレイアウトが崩れる。
- 既存の方法では解決策が見つからず、div#contensに情報量に応じて背景を可変させる方法を模索しています。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
後半の可変とかの意味が良く分からないけど、 コンテンツの上部の両脇に画像を配置したいって事ですね？ 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> <div id="AA"> <div id="BB"> <div id="header"> ～ ～ bodyに上げても良いが、狭くすると黄色画像がズレるから その対策をすれば、bodyに配置する方法でも良い。 画像は、両方とも透過gifを利用し、 AAの黄色画像とBBの絵の画像の黄色い部分の左からの座標と、 黄色い部分の幅は同じにする事。 -------------------- ＞このIMGのheightを2500pxほどの大きな画像にして配置していました。 そんなアホな事をしてはいけませんｗ
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご指摘の通り修正しましたらうまくいきました！まさに自分の思い描いている通りになりました！本当にありがとうございます！感謝します。