文章の背景に画像を固定表示する
文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。
<タグ名 style="background-attachment:固定方法">～</タグ名>
- タグ名：P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
- 固定方法：下記のキーワードで指定できます。
キーワード 文字のスタイル scroll 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。 fixed 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。 サンプルソースです。
<div style="background-image:url(sample/cat.gif);
background-repeat:repeat;background-attachment:fixed;
height:80px;overflow:scroll">この段落は、背景画像を固定表示しています。</div>
スクロールバーでクロースしてみてください。<br><br>
文章はスクロールしますが、背景画像は<br>
動きませんね。サンプル文章が短いので<br>
ちょこっとしかスクロールしませんが...このソースを表示させると、次のようになります。
この段落は、背景画像を固定表示しています。 スクロールバーでクロースしてみてください。
文章はスクロールしますが、背景画像は
動きませんね。サンプル文章が短いので
ちょこっとしかスクロールしませんが...
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス