• 締切済み

画像がスクロールに影響

こちらのテンプレートを http://pensora.blog.shinobi.jp/Preview/V/31/ 下記の様にカスタマイズしました。 http://pensora.blog.shinobi.jp/Preview/V/39/ 結果、記事の日付左の犬画像がスクロールに影響されてしまいます。 CSS で background-position: **; background-repeat: no-repeat; background-image: url('**'); の様に変えてしまうと、表示位置が上手くいきません。 スクロールの影響を受けない為に CSS へ何かを追加すれば いいのか分からず、困っています。 どうぞ、ご教授願います。

みんなの回答

  • Imiko
  • ベストアンサー率57% (280/491)
回答No.2

次のように変更するとどうなりますか? img.logo { position: absolute; ----> position: fixed; clip: rect(auto 150px 150px auto); overflow: hidden;

noname#188936
質問者

お礼

変化ないです。 プラグインなどの img は固定されますが 犬画像 logo だけは固定されません。

全文を見る
すると、全ての回答が全文表示されます。
  • Imiko
  • ベストアンサー率57% (280/491)
回答No.1

画面をスクロールしても犬の画像がスクロールしないようにしたいということでしたら、次のようにしてみてください。 background-attachment:fixed; background-image:url("**");

noname#188936
質問者

お礼

補足させて頂きましたが、その方法では表示が変わってしまうのです。 困ったモンです。

noname#188936
質問者

補足

補足させて下さい。 現在、HTML の記載がこちらです。 <div align="left"><img src="http://file.pensora.blog.shinobi.jp/image1763.gif" class="logo"></div> そして、CSS はこちらです。 img.logo { position: absolute; clip: rect(auto 150px 150px auto); overflow: hidden; カスタマイズ前の状態のままです。 カスタマイズで、HTML に <div id="bodyBlock"> </div> を追加して CSS へ下記を追加しました。 #bodyBlock { height: 450px; overflow-y: scroll; clear:both; } TopBlock と FooterBlock 以外を アイフレームっぽくまとめた形です。 が、画像がスクロールに影響されてしまうので、 background-attachment:fixed; background-image:url("**"); と変えてみましたが、表示が変わる為困っている訳です。 分かり難くて、申し訳ないのですが ・・・。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 壁紙(画像の固定)

    http://dsc.jugem.jp/?tid=23 ↑のテンプレを使用するつもりですが、このトップに画像をおきたいのですが、 例えば、壁紙をダウンロードしてきて貼り付けたら、一つの画像がいっぱい反映されるのです。 っていう事は固定すべきですよね? htmlで<STYLE type="text/css"> <!-- BODY { background-image : url("画像URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </STYLE> ↑これは反映されなくて、cssだと反映されます。 しかしcssに、 background-image:url(画像URL) background-repeat:no-repeat; background-position:right bottom; ↑こう入れても反映されません。何故でしょうか?どういうタグを使えばいいのですか?

  • ページがスクロールするのについてくる背景画像

    わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはOKなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか? cssかjavaでできるでしょうか? 教えてください。 よろしくお願いします。

  • background-positionが効かない?

    seesaaブログでcssをカスタマイズしています。 背景に右上固定で細長い画像を使用したくて bodyタグ内に background-image: url( ); background-repeat: no-repeat; background-position: right top; を記述しました。 すると画像は表示され、リピートもされないのですが、 画面の真ん中あたりに1回表示されるだけで position指定が効いていません。 数値やパーセンテージを入れても変化ありませんでした。 positionだけ効かない、何か思いつく理由はありますでしょうか?

  • gooブログにおける見出しの背景画像について

    gooブログを始めたばかりです。テンプレートカスタムブルーでCSSを編集し、下記のように見出しh1 h2 h3の後ろに背景画像を設定しようとしたのですが、画像の上に文字が乗りません。画像のポジションを調整することもできません。どうしてなのでしょうか? どなたかおわかりの方、ご教示ください。よろしくお願いします。 h3{ width: 640px; font-size: 1.1em; background-image : url(midashi13.png); background-position: 0px 0px; background-repeat: no-repeat; font-weight: bold; color: #007200; }

    • ベストアンサー
    • CSS
  • blog cssカスタマイズで背景画像の指定

    fc2 blog をカスタマイズしているのですが、CSSが上手く動作しません。(テンプレートを元に背景画像とスクロールバーの色を変更) html,body { background: url(画像URL) left top #111; repeat: no-repeat; attachment: fixed; scrollbar-arrow-color: #6DA108; -略- } 上記のように記述しているのですが、「html,」部分をなくすと背景のfixが効くのですが、ないとスクロールバーの色が変わりません。 何がおかしいのでしょうか、アドバイス宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところ背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところの背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

    • ベストアンサー
    • HTML
  • FC2ブログで背景画像を任意の位置に貼れない

    FC2ブログでオリジナルのテンプレートを作成しています。 CSSにて、背景画像を設定しようとしていますが、 配置設定がどうしてもうまくいきません。 画像を右下に配置させられるよう、 以下のように設定しました。 template.cssココカラ----------------------------------------------------- body { background : transparent url("http://blog-imgs-画像のURL") bottom right no-repeat; background-attachment:fixed; } template.cssココマデ----------------------------------------------------- 自分のパソコン上に作ったHTML・CSSでは、右下に配置してくれましたが、 FC2ブログのテンプレートに設定・反映したところ、 右上に配置されてしまいました。 InternetExproler9、GoogleChrome、FireFox3.6で動作を確認したところ、 正常に配置してくれたのはFireFoxだけでした。 この他に、background-positionで配置場所を個別に設定するなどしましたが、 どうしてもうまくいきませんでした。 ご助言をいただけますようお願いします。

    • ベストアンサー
    • CSS
  • ブログタイトルの背景に画像設定 (FC2)

    FC2ブログの共有テンプレートからDW99さんの[aqua_3cpl] (http://preview.blog22.fc2.com/?style3=2111&index)をダウンロードしました。 このテンプレートでブログタイトルの背景に画像を設定したいと思いました。 そこで、スタイルシートに、「カスタマイズ・マニュアル」を参考にして、以下を挿入してみましたが、ブログを確認しても画像は表示されませんでした。 (画像パスには、画像のURLを入れています) 初心者にも分かるように、背景画像の設定方法を教えて下さい。 ↓これをスタイルシートに挿入してみましたが… /* ブログタイトル */ .header { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ }

  • 背景の固定、繰り返しなし、スクロールなしの方法

    こんにちは。 題名の通り、大判壁紙を左上に固定し、ついでに壁紙がスクロールしないようにしたいのですが、できません。ちなみに、 <STYLE type="text/css"> <!-- BODY { background-image : url("背景のURL"); background-attachment: fixed; background-position: 0% 0%; background-repeat: no-repeat; } --> </STYLE> というのをはると出来る、と、素材やさんに書いてあったのでやってみたんですが、ダメでした。使ってるソフトはGO LIVE5.0で、スタイルシートが簡単に使えるようになっていて、それでもやってみたんですがなぜか出来ません。もう…「お手上げじゃああああ!!!」いうかんじなのです(涙)この質問で出来なかったら諦めますが…一体何が問題なんでしょう?ぜひアドバイスよろしくお願いします。