? 背景画像の表示方式の設定(background-attachement) - 背景プロパティ - スタイルシート入門

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

広告

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

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>フジテレビ含み損314億円に、ライブドア株7割下落</h1>

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

<p>
昨年5月にライブドアの第三者割当増資を440億円で引き受けた際には1株32
9円で、7割以上も下落した計算だ。
</p>

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

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

関連記事 (一部広告含む)