- 締切済み
ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- Visual Basic
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- salonpath
- ベストアンサー率48% (194/399)
>bodyの開始位置がディスプレイによって変わってしまった もしかして背景画像の配置位置を指定出来ることを知りませんか？ コンテンツが中央配置なのでbodyの背景も中央配置しないとずれます。 たとえば body{ backgroung:url(../images/body_bg.jpg) center top; } これで 横位置：中央 / 縦位置：上部 になります。 何も指定しないと左上から始まります。 QXGAの2048ｘ1536pxを想定してwidth2048pxとして背景を作ると center配置する場合1024pxが中心になって、1449pxがwrapperの右端になります。 #1の回答は、そこから右下にラインを引いていってはどうですか？というものです。
- salonpath
- ベストアンサー率48% (194/399)
div#header div.lineのtopが210px（headerの高さ分）無いと、想定図のようにならないと思うのですが。 添付画像のようにするなら bodyに「右下に続くラインが引いてある巨大な背景画像（横幅2048pxあたり）」を設定するのが一番楽かと思います。
お礼
回答有難うございます。 bodyに巨大な背景画像を指定してみたのですが、bodyの開始位置がディスプレイによって変わってしまったので、うまくいきませんでした。 ただ、これを試していたときに、css的にあっているかどうかは分からないのですが、bodyに対しoverflow-x:hidden;としてみたらよこすクローロールが出なくなったのでうまくいきました。