• 締切済み

フレームで背景画像を継ぎ目なく表示させるには

横フレームで上下のフレームに同じ背景画像を継ぎ目なく表示させ、 ひとつのページのように見せたいのですがどのようにすれば良いでしょうか？ リファレンスを見た限りCSSでbackground-positionを使えばできそう と思うのですが、具体的にどうすれば良いのかがわかりません。 おわかりになる方宜しくお願いします。

  • HTML
  • 回答数3
  • ありがとう数2

みんなの回答

  • vista2446
  • ベストアンサー率46% (131/279)
回答No.3

background-image:url(○○.gif);　画像パス background-position:横位置 縦位置;　　　　pxまたは%で指定　横と縦の間に半角スペース background-attachment:fixed;　背景を固定 <body style="background: url(aa.gif) 88% top fixed;">のようにまとめることもできます。 ブラウザで確認しながら設定した方がいいみたいです。IEとFirefoxで微妙にズレました。 試してみてください。しかし、上フレームが180pxで画像の高さが30pxならそのままでも合いそうな気もしますが。..

  • LACOMS
  • ベストアンサー率65% (15/23)
回答No.2

フレームセットを作るときに以下のようにするとフレームボーダーは、なくなって、つなぎ目がなくなりますよ。 <frameset rows="80,*" frameborder="no" border="0" framespacing="0"> frameborder：フレームボーダーの表示の有無を指定します。 　　　　　　　yes（表示），no（非表示） 　　　　　　　１（表示），０（非表示）で指定しても可 border framespacing：どちらもボーダーの太さですが、ブラウザの種類や 　　　　　　　バージョンによってどちらを使うかなのですが、 　　　　　　　両方指定しておけばOKです。 これでよろしいでしょうか？違っていれば、また質問してください。

rokki_120
質問者

お礼

お早い回答ありがとうございます。 すみません、書き方が悪かったですね。 フレームの境界線がなくなるように、ではなく、 上下フレームに同じ背景画像を表示させてそれが継ぎ目なく表示 されるようにしたい、ということだったんです。 どうしても上フレームの下と、下フレームの上がずれてしまうので… しかし丁寧なお答えありがとうございました！

  • quads
  • ベストアンサー率35% (90/257)
回答No.1

フレームの具体的な領域分割値(ピクセル値、パーセンテージ値など) 背景画像のピクセル数 を明示して頂ければ具体的な回答ができるかもしれません。 固定幅、可変幅の違いによって具体的な指定値が異なってしまいます。

rokki_120
質問者

お礼

お早い回答ありがとうございます。 フレームは3つ分けフレームです。 まず左右に12%と88%で分け、 左フレームが更に上下に分かれていて上に180ピクセル指定しています。 背景画像は300×30の横長です。 こちらで良いでしょうか。 お答えお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • フレームで同じ背景画像の続きを表示させたい

    フレームで上下2つに分けたページに、同じ背景 （固定したもの）で、例えば右下に画像を固定して、上下のフレームで それぞれの続きの画像を表示させるには、どうすれば良いのでしょうか？ お願いしますm(__)m

  • 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像と

    添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像としてCSSでレイアウトしたいのですが、うまくいきません。 background-position　の設定をするのだということはわかるのですが、 赤枠でくくった部分の２枚の画像をそれぞれ上下に指定するにはどうしたらよいでしょうか？ どうも今書いているソースではうまくいきませんどなたか回答お願いします。

  • HPの背景画像が表示されません

    ホームページNinja９を利用してＨＰを作成しております。cssを使って背景画像を固定しているのですが、自パソコンから閲覧すると背景画像の固定表示はさていました。しかし最近、他パソコンから閲覧した際その背景画像が全く表示されていないことに気がつきました。当サイトの全てのページにおいて背景が表示されておりませんでした。そのパソコンで閲覧した他サイト様の背景はきちんと表示されていましたので自サイトの問題と認識しております。 しかし、その理由がわからなく困っております。どなたか教えて頂けないでしょうか。 因みに、使用したcssは次の通りです。 <style type="text/css"> <!-- body {background-image : url("◇◆◇.jpg"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat;} --> </style> ◇の部分のファイル位置は確認しましたが正しかったようです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景画像の表示

    先ほど背景画像の表示はできましたと返答いたしましたが、背景を別のものに変更したら背景の表示がなくなってしまいました。 <body background="http://www---------------/---/"--- .jpg"text="#808000">で表示がでません。 ※ＣＳＳで背景設定しているページもあります。

    • ベストアンサー
    • HTML
  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • フレームをまたいで背景画像を表示させたい

    　現在作っているホームページで、フレームでメニュー部分(フレームAとします)と、本文を表示させる部分(フレームB)を分けたページを作っているのですが、Aの各メニュー項目をonMouseOverするとBの背景画像がそれぞれそのメニュー項目に対応したものに変わる、という事をしたいのです。 　できれば、その背景画像が変わるのはBに表示させるある1ページに限りたいのですが、何かうまい方法はないでしょうか? 　良いアドバイスがあったらご教授をよろしくお願いします。

  • 2つ画像を背景にするスタイルシートってある？

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- 　　　BODY { 　　　　　　background-image:素材のURL; 　　　　　　background-position:0% 100%; 　　　　　　background-repeat:no-repeat; 　　　　　　background-attachment:fixed; 　　　　} --> </STYLE>

    • 締切済み
    • CSS
  • 背景画像がNetscapeでは表示されない

    <HEAD>タグ内に下記の方法で背景画像を中央に表示させています。 IE5.5では正常に表示されますが、ネスケ4.7で確認すると背景画像のみ表示されません。 <BODY>タグ内の文字は正常に表示されます。 どうしたら良いでしょうか？ <STYLE type="text/css"> <!-- table#base { background-image: url("img/bg.jpg"); background-repeat:no-repeat; background-position: center center; } --> </STYLE> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 親フレームのリンクからアイフレーム内の背景画像を位置指定して変更する

    アイフレーム内の最初に表示してあるページ内に <style type="text/css"> <!-- body{ background-attachment : fixed; background-repeat : no-repeat } --> </style> を書いて、親フレームのリンクにオンマウスオーバーとjavascriptをつかって、 背景画像を左上固定で繰り返さない指定はできたのですが、 指定する背景画像の位置をその都度変えたい場合に、 親フレーム内のリンクから指定する方法をご存知の方はどうか教えていただけないでしょうか？検索など、いろいろやってみたのですがどうもみつからないんです…

  • スクロールに沿って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でスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する