- ベストアンサー
backgroundに画像
- みんなの回答 （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は間違いでした。すみません。
関連するQ&A
- backgroundの色を変えたい
ある画像のテンプレートがあり、 元々設定されているその画像の色を変化させたいので Backgroundのレイヤーをいじろうと思ったのですが Backgroundのレイヤーには鍵のマークが付いているせいか どうかわかりませんが 色を変えられません 現在そのbackgroundに設定されている色は青なので これを緑とか赤などに変えたいのですが これを変えるにはbackgroundの色を変化させなければ いけませんよね？？ どうすれば良いでしょうか？ よろしくお願いします
- ベストアンサー
- グラフィックソフト
- backgroundについて教えて下さい。初めて作ってます。
backgroundについて教えて下さい。初めて作ってます。 ｃｓｓテンプレートの backgroundのついて教えて下さい。 真っ白いテンプレをダウンロードしてホームページビルダーで編集しています。 素人なので、コピーを利用しながら作成途中です。 画像がついているサイトで「bodyからbodyにコピーして下さい」と書いてありました。 <style type="text/css"> <!-- body{ background-image: url(画像); background-color : #000000; background-attachment: fixed; background-repeat: no-repeat; background-position: right top; --> --> --> --> --> </style> </head> <BODY> 上記をコピーした所、プレビューでは綺麗にみることが出来ました。 テキストにリンク設定してある文字にカーソルをのせると赤色に表示されます。 カラー白と付け足してみても赤いままです。 外部ｃｓｓというものかどうかすらわからないのですが、 テキスト部分にカーソルをのせて白く表示させることは出来ませんか？ もし、やり方があるならば教えて下さい。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- background-imageが効かない
HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。
- 締切済み
- CSS
- バックグラウンドに文字を表示させる事は可能？
覚えたい文章があるのでMacを開ける度に見れるようデスクトップのバックグラウンドにその文字群を表示させたいのですが、考えられうる方法等は何かないでしょうか？ デスクトップのバックグラウンドには普通何か写真等の画像を設定しますが、そこに文字群を画像として設定するにはどうすればいいでしょうか？ 例えばワードの文章が表示されている画面をそのまま画像として保存し、それをバックグラウンドとして設定出来たりしないかなと思ってるのですが。。。。 詳しい方回答よろしくお願いします。
- ベストアンサー
- Mac
- onMouseでbackgroundの画像を変える
あるテキストのリンクにマウスを持っていくと、テーブルのTDにつけてあるbackgroundの画像を他のものに入れ替えるという事をやりたいと思っています。 できればたくさんのブラウザでやりたいのですが、最低IEで動けばと思っています。できないのかなとも思うのですが。 どなたか是非アドバイスお願いします。よろしくお願いします。
- ベストアンサー
- JavaScript
- background:urlについて
全くの初心者なのでわからずに困っています。 background:url("画像のURL")とbackground:url(画像のURL)は異なるのでしょうか？ ダブルクォーテションがないと意味が変わるのでしょうか？ ご存じの方、ぜひお助けください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- background-imageの画像を拡大する方法はありますか？
background-imageの画像を拡大する方法はありますか？ cssでbackground-imageを指定しています。 baackground-image: url('画像のアドレス'); この画像を拡大する方法はあるのでしょうか。 ありましたら、教えてください。 普通の画像はimageタグでwidthやheightで拡大縮小できるのですが、 baackground-imageではどうやっていいか、調べてもわかりませんでした。
- 締切済み
- その他（インターネット・Webサービス）
- backgroundが反映されない
超初心者です。 htmlを書いていて、背景に画像を設定したいのですが、本のとうりにやっても表示されません。 <body background="img/16.gif"> これでそのページの背景には16.gifというファイルの 画像が表示されるはずなんですよね？ 何がおかしいのでしょうか？ ちなみに16.gifというファイルは、作成中のページと同じフォルダに保存してあるのですが・・・
- ベストアンサー
- その他（インターネット・Webサービス）
- Background2
https://gyazo.com/59efd094c98cb3f71816c45fa0a66073 上の画像から background-repeat: no-repeat; というコードですが、最初に画像のコードであれば、このコードはいらないのではないでしょうか
- ベストアンサー
- CSS
お礼
まとめての回答、失礼します。 ソースまで書いていただきありがとうございます。 こちらの方法でやってみたいと思います。