画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか?
今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。
使用しているソースは以下のとおりです。
----------------------------------
</HEAD>
<BODY>
<TABLE cellspacing="0">
<TBODY>
<TR>
<TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD>
</TR>
<TR>
<TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD>
</TR>
<TR>
<TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
----------------------------------
「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。
また、styleに
<!--
BODY {
background-attachment: fixed;
background-repeat: repeat-x;
background:position:top}
-->
を書いてみたりもしたのですが変化なしでした。
ご存知の方、詳しい方アドバイスお願いします。
No.1ベストアンサー
- 回答日時:
fixed は、background-attachmentの属性で、スクロールに関するものです。
topが、background-positionの属性です。
3箇所の「fixed repeat」を「top repeat-x」に替えればよいはずです。
また
<!--
BODY {
background-attachment: fixed;
background-repeat: repeat-x;
background:position:top}
-->
では、
background:position:top}
がおかしいですね。
background-position:top}
です。このとき画像は指定していましたか。
styleにはなにもいれず「fixed repeat」を「top repeat-x」にしたところ水平方向+上に固定されました!!!!
的確及び素早い回答ありがとうございました^^
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
htmlかcssで背景の白い枠をなく...
-
同じ画像 複数回使用
-
LightBoxの矢印の出し方
-
楽天ショップのデザイン
-
透過gif画像の上に文章を重ねる...
-
スタイルシート(CSS)で左にア...
-
見出しの複数行の対応について
-
background-sizeの背景で最小値...
-
画像で背景透明のテキストがに...
-
マウスオーバーするボタンの画...
-
HP作成 作成した画像を動画の上...
-
画像にオンマウスで暗くする方法
-
CSS使用時のDIVにおける背景指...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
マウスが乗ったとき斜め下に下がる
-
画像の上に文字を乗せたい!
-
レスポンシブWebデザイン習得へ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報