文章の背景に画像を固定表示する

文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。

<タグ名 style="background-attachment:固定方法"></タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 固定方法:下記のキーワードで指定できます。
    キーワード文字のスタイル
    scroll 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。
    fixed 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。

サンプルソースです。

<div style="background-image:url(sample/cat.gif);
background-repeat:repeat;background-attachment:fixed;
height:80px;overflow:scroll">
この段落は、背景画像を固定表示しています。
スクロールバーでクロースしてみてください。<br><br>
文章はスクロールしますが、背景画像は<br>
動きませんね。サンプル文章が短いので<br>
ちょこっとしかスクロールしませんが...
</div>

このソースを表示させると、次のようになります。

この段落は、背景画像を固定表示しています。 スクロールバーでクロースしてみてください。

文章はスクロールしますが、背景画像は
動きませんね。サンプル文章が短いので
ちょこっとしかスクロールしませんが...

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス