ベストアンサー 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像と 2010/05/31 00:03 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像としてCSSでレイアウトしたいのですが、うまくいきません。 background-position の設定をするのだということはわかるのですが、 赤枠でくくった部分の2枚の画像をそれぞれ上下に指定するにはどうしたらよいでしょうか? どうも今書いているソースではうまくいきませんどなたか回答お願いします。 画像を拡大する みんなの回答 (1) 専門家の回答 質問者が選んだベストアンサー ベストアンサー abril ベストアンサー率69% (388/560) 2010/05/31 00:54 回答No.1 > どうも今書いているソースではうまくいきませんどなたか回答お願いします。 ではソースを見せて下さい。でないと、実際に質問者様のやり方のどういう点が間違っている(考え方に適切ではない点がある)のかがわかりません。 ちなみに、 > 赤枠でくくった部分の2枚の画像をそれぞれ上下に指定するにはどうしたらよいでしょうか? CSS2では1つのボックス要素に対して背景画像は1つしか使用できない、という事は理解してらっしゃいますよね? (CSS3は可能ですが、実装状況の問題がありますので、今はこの点は問題にしない事にします。) 質問者 お礼 2010/05/31 18:05 いつも回答ありがとうございます。 ひとつのボックスにたいして、背景画像がひとつしか使用できないというのは、もしかして、、、。 とは思っていましたが、はっきりとはわかっていませんでした。 やっぱり、<div>タグの入れ子のような感じにして設定するしかないのでしょうか? ともかく色々試してみます。 ありがとうございます。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ ビジネス・キャリア職種デザイナー・クリエイティブ職 関連するQ&A ブラウザの大きさによって背景画像の位置が違う ブラウザの大きさによって、背景画像の位置(横位置)が変わってしまうのですが、どうしたらブラウザの大きさに依存せずに背景画像を一定の位置に置くことができるのでしょうか?? 背景画像はcssのbackground-positionで横位置のみ%を使って指定しました。 left center rightなどで指定すると、ブラウザ関係なく、固定の位置で表示してくれるのですが、今回はレイアウト的に%を使って微妙な位置に表示させたいのです。 この説明では分かりづらいかもしれませんが、 %を使わなくても微妙な位置に設定でき、ブラウザの大きさに依存しない方法などありましたら、アドバイスをお願いいたします!! 背景画像の大きさ指定。 cssのbackground-positionで背景画像の位置を設定してますが、この場合画像の大きさは設定 できないのでしょうか。どこにwidth="",height=""を書けばいいかわからなくて…。 単純な質問かもしれませんがよろしくお願いします。 背景画像の指定方法 少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン(WinXP IE6)で見ると表示の仕方が変わってきます。 参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。 人生100年時代!シニアでも転職できますか? OKWAVE コラム スクロールに沿ってjavascriptで背景画像を 現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。(単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい) cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。 フレームで背景画像を継ぎ目なく表示させるには 横フレームで上下のフレームに同じ背景画像を継ぎ目なく表示させ、 ひとつのページのように見せたいのですがどのようにすれば良いでしょうか? リファレンスを見た限りCSSでbackground-positionを使えばできそう と思うのですが、具体的にどうすれば良いのかがわかりません。 おわかりになる方宜しくお願いします。 2重に背景画像を 質問をさせていただきます。 画像のようにこれまでは 赤のBのみをbodyに指定して パターンイメージを並べていました。 そこでその上にAの様な横だけに並べるPNG画像の背景が 欲しいとおもったところこのようなサイトを見つけました。 ttp://www.bnote.net/css/css_layout/tips_html_back.html このサイト方がおっしゃられている様に htmlにback-groundでBを指定 bodyにAを指定すれば出来る! と思ったのですが上手くいきません。 htmlにBを並べるのは成功しました。 しかしbodyにAを指定してはめこむと pngの黄色い部分が透過されず白背景になってしまいました。 bodyにbackground-color: transparent;を指定したりと 試しましたがなんとも上手くいきません。 何かアドバイス等ございましたらよろしくお願いします! 今は html { background-image:url(○○○○○.gif) } body { height : 100%; text-align:center; font-size:16px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 1.6; background-color: transparent; background-image:url(○○○○○.png); background-position: left top; background-repeat: repeat-x; } となっております。 cssで、imgタグに、背景画像を敷きたい cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。 背景はそのままで内容部分だけが上下する方法 お邪魔致します。質問させて下さい。 以下の、氷室京介さんのサイト、Himuro.comを例に挙げましたが、 http://www.himuro.com/ グレイ色の背景は、上下スクロールしてもそのままで動きませんが、添付した画像の様に、赤枠で囲ったところは上下スクロールすれば、上下方向に動きます。 こういう、 【Q:背景は動かずに、内容コンテンツだけが上下に動く様なデザインは、JavaScriptを使わねば無理でしょうか?それとも、HTML5/CSS3だけで出来るものでしょうか?】 私はHTML5/CSS3は出来ます(完璧ではなくまだまだ学習中)が、JavaScriptは学習していないので、知らないのです。 キーワードで2~3、ググってはみたのですが、今のところまだ不明で・・・。 どなたかお教え頂けますか? div入れ子の背景画像 【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか? 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。 背景画像の表示 先ほど背景画像の表示はできましたと返答いたしましたが、背景を別のものに変更したら背景の表示がなくなってしまいました。 <body background="http://www---------------/---/"--- .jpg"text="#808000">で表示がでません。 ※CSSで背景設定しているページもあります。 CSSでの背景画像の設定について CSSでの背景画像の設定について質問です。 参照ページ(http://www.balmuda.com/jp/)のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。> 解決策を教えて頂ければ幸いです。よろしくお願い致します。 2つ画像を背景にするスタイルシートってある? 1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE> キャリアについて教えて?修行の成果を示す退職届と転職書類の書き方 OKWAVE コラム 背景画像表示について CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px; height : 1000px; top : 1px; left : 2px;position : absolute; background-image: url(****.gif); z-index: 1; visibility : visible; " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした CSS 背景画像の指定( )内に""を入れる? CSSの背景画像のソースでどちらが正しいのか教えてください。 【Aパターン】 body{ background-image:url(images/***.jpg); } 【Bパターン】 body{ background-image:url("images/***.jpg"); } の( )内に" "(ダブルクォーテーション)を付ける・付けないで関係なく、結果としてはどちらも背景画像が表示されます。 背景画像の指定するサイトを見ても、付いてたり・付いてなかったり…書籍でも特に具体的に""←について詳しく載ってないのですが、実際どちらを使う方がが正しいですか? 背景と別の画像を右下に固定して表示するには? (1)背景を表示して、さらに(2)右下の位置に固定して別の画像を表示することは出来るのでしょうか? (1)だけなら、BODYタグの中で設定すれば出来ました。 (2)だけなら、某サイトでコピペしたものを使わせてもらい、表示することが出来ました。 しかし、二つを同時にしようとすると、2番目のものしか表示されません。 どうすべきなのか、無理なのか、ご存知の方、教えてください。 ちなみに、(2)のコピペとは以下のものです。スタイルシートというのでしょうか?良くわかりませんが。 <STYLE TYPE="text/css"> <!-- BODY{ background-image:url(gazou.png); background-attachment :fixed; background-repeat: no-repeat; background-position: 100% 100%; } --> </STYLE> HPの背景画像が表示されません ホームページNinja9を利用してHPを作成しております。cssを使って背景画像を固定しているのですが、自パソコンから閲覧すると背景画像の固定表示はさていました。しかし最近、他パソコンから閲覧した際その背景画像が全く表示されていないことに気がつきました。当サイトの全てのページにおいて背景が表示されておりませんでした。そのパソコンで閲覧した他サイト様の背景はきちんと表示されていましたので自サイトの問題と認識しております。 しかし、その理由がわからなく困っております。どなたか教えて頂けないでしょうか。 因みに、使用したcssは次の通りです。 <style type="text/css"> <!-- body {background-image : url("◇◆◇.jpg"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat;} --> </style> ◇の部分のファイル位置は確認しましたが正しかったようです。 よろしくお願いいたします。 CSSによる背景画像のセンタリング。IE以外ではうまくいかない 背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外(firefoxなど)は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか? よろしくお願いいたします。 サムネイルをクリックして背景画像を変える方法を教えてください サムネイルをクリックすると背景画像が変化するようにしたいのですが、 以下のソースではうまくいかず、質問に上がらせて頂きました。 まず<head>~</head>に <style type="text/css"> <!-- body{ background-repeat:repeat-x; background-position:top left;} --> </style> と入れて、<body>~</body>に <a href=JavaScript:; onclick="document.body.style.backgroundImage='画像URL'";> <img src="画像URL" title="***" width="200" height="60" border=0 class="pictw"/></a> (class="pictw"はサムネイルに枠線を付ける設定になっています) としたのですが、サムネイルは表示されるのに クリックしても何も変化しません。 他のソースも試したのですが、上一列のみに表示などの 背景画像の位置指定やリピート設定ができるものが見つかりませんでした… (この条件が必須なので…) どうすればいいのかどうか教えてください。よろしくお願いします。 背景に複数の画像を入れることは可能でしょうか HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; } ホームページの背景画像がチラチラする ホームページを作成しているのですが、黒と灰色の1px単位の縞模様の背景画像を使用すると、スクロール時にチラチラと点滅します(IEのみ) body部分の背景画像は、cssのbackground-attachment:fixed;でチラチラしなくなったのですが、td部分は指定しても変わらず点滅します。 何か解決方法はないものでしょうか。 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ ビジネス・キャリア 職種 経営・管理職財務・会計・経理人事・総務営業事務・一般職デザイナー・クリエイティブ職マーケティング・企画コンサルティングSE・インフラ・Webエンジニア研究・開発・技術職法務・知的財産・特許その他(職種) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
いつも回答ありがとうございます。 ひとつのボックスにたいして、背景画像がひとつしか使用できないというのは、もしかして、、、。 とは思っていましたが、はっきりとはわかっていませんでした。 やっぱり、<div>タグの入れ子のような感じにして設定するしかないのでしょうか? ともかく色々試してみます。 ありがとうございます。