- 締切済み
ディスプレイのサイズに合わせた背景画像
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; } ************************************************
- CSS
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- salonpath
- ベストアンサー率48% (194/399)
理想のレイアウトの画像や、具体的な説明がないので完成形が全く想像できないので補足要求です。 中央配置のwrapperのwidthが850pxでそこから右に300px そうすると横スクロールが発生しないブラウザの横幅は大体1450pxになるように作ってますよね。 .lineは#wrapperにくっついてすぐの右側に配置しないとダメなんでしょうか？ 重なってもNG？ body直下(#wrapperの外)に.lineを持ってきて、right:0;ではダメですか？
お礼
回答有難うございました。 画像を間違ったものをアップしてしまったので、削除してしまいました。 画像つきで同様の質問をUPしますので、もし、なにか参考があれば、また回答していただければ幸いです。
補足
回答ありがとうざます。 説明不足で申し訳ありません。 中央配置で置いたwrapperの中にさらに850pxでヘッダーを作りました。 このヘッダー部分から、body部分にかけて、よくプレゼントにリボンを書けるような感じで斜めにlineをおきたいのです。（うまく説明できない・・・。） ＞ブラウザの横幅は大体1450px ブラウザのサイズというよりはブラウザを最大化したときのサイズにということでノートPCでも19型Wくらいのディスプレイでも表示できるようにしたかったです。 ＞重なってもNG？ 重なってもよいのですがヘッダーの背景画像部分にこのlineの画像を配置しています。このヘッダーのlineの画像につながる様にbody部分line画像を配置しようと思っていました。 ＞body直下(#wrapperの外)に.lineを持ってきて、right:0;ではダメですか？ body直下にも持ってきて試したのですがうまくいきません。right:0;だとディスプレイのサイズによって、斜めにかけたlineの開始位置がずれてしまうので、ヘッダー部分にあるlineの画像とつながりませんでした。