- ベストアンサー
backgroundに画像
画像をフロートさせたもの（5～6枚）を縦に並べて、backgroundとして設定したいのですが、どういう設定にすえばいいのでしょうか？Javascriptでの設定でしょうか？ 教えてください。お願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
メニューを含包しているセルに複数の背景画像を指定するのは不可能と思われます。１枚の大きな画像を背景にすることでイメージ的には同じになると思いますが。ただ今回はＮＧと言うことなので強引ですが、『背景のためだけのＤＩＶ要素』を重ねてそれらしい事ができるかと思います。ただしご指定のありましたrepeat-xを使用すると、横方向への位置調整は見た目では無効になってしまいますね。横方向に5・6枚並べた画像を個別に用意しno-repeatを指定したほうがイメージ的に近くなるかもしれません。 スタイル部----------------------- #bg1{ height: 500px; background-image: url(背景1); background-repeat: repeat-x; background-position: 0 0; } #bg2{ height: 500px; background-image: url(背景2); background-repeat: repeat-x; background-position: 50% 50%; } #bg3{ height: 500px; background-image: url(背景3); background-repeat: repeat-x; background-position: 100% 100%; } HTML部----------------------- <table> <tr> <td valign="top"> <div id="bg1"><div id="bg2"><div id="bg3"> <ul> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> </div></div></div> /td> <td valign="top"> Contents<br />Contents<br />Contents<br />Contents<br />Contents </td> /tr> </table> 的外れな回答だったら補足してください。
その他の回答 (4)
- go_nta
- ベストアンサー率45% (5/11)
No.4ですが、table使えるならtableをネストした方が楽でしたね（汗）
- go_nta
- ベストアンサー率45% (5/11)
>左側に同じものを繰り返し掲載させるというものです。 >（１つのくくりをrepeat-xで繰り返す手法をとるつもりです） repeat-xで横方向に繰り返す背景を各コンテンツメニューの背景に使用すると言うことでしょうか？以下の様な単純な物しか思い浮かびませんでしたが スタイル部----------------------- #menu1{ background-image: url(背景1); background-repeat: repeat-x; } #menu2{ background-image: url(背景2); background-repeat: repeat-x; } #menu3{ background-image: url(背景3); background-repeat: repeat-x; } HTML部----------------------- <table> <tr> <td> <ul> <li id="menu1">Menu-1</li> li id="menu2">Menu-2</li> <li id="menu3">Menu-3</li> </ul> </td> <td> Contents<br />Contents<br />Contents<br />Contents<br />Contents </td> </tr> </table>
- go_nta
- ベストアンサー率45% (5/11)
1枚の大きな画像不可と言うことは、その大きな画像を細切れにした場合はＯＫなのでしょうか？ 1つのブロック要素に指定できる背景画像は1つだと思います。複数の背景画像を指定したいなら『背景の為だけの』ブロック要素を重ねなければなりませんね。CSSに厳格な方からは怒られそうですが・・・あとはそれぞれのブロック要素の中でbackground-positionで位置調整。ドット単位の位置調整は画像の方で。 基本的なレイアウトはCSSでしょうか？TABLEでしょうか？どの様な物を作りたいのか具体的に見えてこないと回答しづらいのでよろしければ基本的な構造部分を教えてください。 もちろん回答できるかどうかわかりませんが・・・（汗）
お礼
再度回答いただきありがとうございます。
補足
作りとしては、tableで横に2つのセルを並べて、左側にコンテンツメニュー一覧を、右側に各コンテンツのページを掲載するものです。 今回の相談箇所は、左側に同じものを繰り返し掲載させるというものです。（１つのくくりをrepeat-xで繰り返す手法をとるつもりです） このような感じで解りますでしょうか？
- go_nta
- ベストアンサー率45% (5/11)
>画像をフロートさせたもの（5～6枚）を縦に並べて ちょっと意図が分かり難いのですが、画像が5・6枚並んだ大きな画像を背景として使いたいなら、Photoshop等の画像処理ソフトで1枚の大きな画像を作成しbodyの背景に指定します。 5・6枚のそれぞれを個別のブロック要素(pとかdivとか・・・)に指定したいなら個別にそれぞれの要素毎に指定していきます。 背景画像の指定方法はCSSが主流ですね。ukkey119さんの経験がどれくらいかは分かりませんが、ご存知無ければ入門書を読んでみれば必ず載っているはずです。検索してみるのもいいと思います。 記述方法は色々ありますが <body style="background-repeat:no-repeat; background-image: url(背景画像のＵＲＬやパス)"> とか。 多分JavaScriptは関係ありません。
お礼
回答いただきありがとうございます。 1枚の大きな画像ですと、今回の制作の意図に反するとのことです。（私も最初、その方向で以降と思ったのですが、クライアントからNGが出ました） CSSでブロック要素ということですが、divを使って詳細を教えていただければありがたいのですが・・・。 JavaScriptは間違いでした。すみません。
お礼
まとめての回答、失礼します。 ソースまで書いていただきありがとうございます。 こちらの方法でやってみたいと思います。