- 締切済み
画像固定をするタグを教えてください
確認せず質問を終了するにしてしまいました・・ すみません。 先ほどチェック柄の背景の上に写真を加工した画像を右下部分に貼り付けたいという質問をさせていただきました。 しかし、実際やってみたところ 写真を加工した画像がスクロールされた時に固定されてませんでした。 <style type="text/css"> .aa{ position:absolute;/*絶対配置で*/ right:170;/*ブラウザ右からの距離が0*/ bottom:10;/*ブラウザ下からの距離が0*/ } </style> のどこかにattachment: fixedか何かを入れないと固定にならないと思い試したら固定されてませんでした。 画像を固定させる方法を教えてください。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- salonpath
- ベストアンサー率48% (194/399)
>背景が固定されなくなりました… あぁ背景も固定なんですね。 ↓fixedを追加します。 body,* html #wrap { background:url(背景画像のurl) fixed; } >画像をもう少しセンターに寄せたい場合 .aa{}の中のbottomとrightを変更ですよ 先頭に_(アンダーバー)が付いてるのはIE6-7用の位置指定になります。 right:170px; bottom:10px; _right:186px; _bottom:26px;
- salonpath
- ベストアンサー率48% (194/399)
スクロールの事全く忘れてました、すみません。 ■css <style> * { padding:0; margin:0; } body,* html #wrap { background:url(背景画像のurl); } * html, * html body { height: 100%; overflow:auto; } * html #wrap { overflow: auto; position: relative; width: 100%; height: 100%; } .dummy {/*スクロールが発生した場合の確認用class*/ height:1800px; width:1200px; } .aa { /* fixedが効くブラウザ向け */ position: fixed; bottom: 1px; right: 1px; z-index:1; /* fixedが効かないブラウザ向け、スクロールバーのサイズ分ずらした */ _position: absolute; _bottom:17px; _right:17px; } </style> ■html <body> <div class="aa"><img src="固定表示させる画像#warpの外に置く" /></div> <div id="wrap"> <div class="dummy">コンテンツ</div> </div> </body> ■問題点 試してもらえると分かると思うのですが、IE6-7とその他のブラウザでスクロールバー分のズレが発生します。 なので右下基点に厳密な配置をするのは難しいかもしれないです。 とりあえずここまでしか出来ませんでした。
補足
ありがとうございます。 チェック柄の背景が固定されなくなりました… どうすればいいのでしょうか。 固定する画像をもう少しセンターに寄せたい場合はどうしたらいいのでしょうか。
補足
できました、ありがとうございます! もうひとついいでしょうか? 画像はあるサイト様のテンプレートの一部なんですがこのようにテーブルを作成したいんですが、 どうしたらいいのでしょうか。 テーブルの背景はsnowかhonydewにしたいんですが・・・。 度々で申し訳ありませんがよろしくお願いします。