背景画像の表示方式の設定

ブラウザでスクロールさせた場合、背景画像も同時にスクロールしますが、背景画像はスクロールさせずに固定表示させたい場合にこのプロパティは使います。定義式は下記のようになります。

background-attachement : attachement

プロパティは"background-attachement"です。値には下記の2つの値のどれかを指定します。

background-attachement : scroll;  /* スクロールと連動、デフォルト */
background-attachement : fixed;   /* 背景画像固定 */

では実際に試してみます。

※背景画像として下記のものを用意し、1回だけ表示させています。

背景1

sample4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample4.css" type="text/css">

</head>
<body>

<h1>フジテレビ含み損３１４億円に、ライブドア株７割下落</h1>

<p>
ライブドアの株価が１日、９４円まで下落し、フジテレビの保有するライブドア株
の含み損は３１４億円に拡大した。
</p>

<p>
昨年５月にライブドアの第三者割当増資を４４０億円で引き受けた際には１株３２
９円で、７割以上も下落した計算だ。
</p>

<p>
企業会計ルールでは、時価が取得価格より５０％以上下落した場合には、その期の
決算で、含み損を強制的に損失（減損）処理し、特別損失を計上しなければならな
い。フジの場合、ライブドアの株価が３月末までに１株１６５円まで上昇しなけれ
ば、減損処理の対象になる。
</p>

<p>
フジテレビは２００６年３月期の業績について、税引き後利益は連結で２３０億円、
単体で１７３億円の黒字と見込んでいるが、株価が回復せず、現在の株価の水準が
続けば、連結ベースで初の赤字になる恐れがある。単体でも、創業当初を除けば、
初の赤字になる可能性が強まる。
</p>

<p>
（読売新聞） - 2月1日19時52分更新
</p>

</body>
</html>

sample4.css

@charset "Shift_Jis";

body{
background-repeat:no-repeat;
background-image:url("../img/copyright.png");
background-attachment:fixed;
}

実行結果は下記の通りです。

背景画像固定の指定のサンプル

ブラウザをスクロールしても背景画像は同じ位置に表示されています。

背景画像固定の指定のサンプル

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。