g010
Copyright(C) 2004 web工房 All Rights Reserved
action
ウィンドウを上下にスクロールしてみて下さい
文字や表、画像はスクロールしますが背景画像は固定されます
下記のリンク文字をクリックすると固定/解除を切り替えできます
クリックすると背景画像固定解除/画像は複数表示
クリックすると背景画像固定/画像は1枚だけ表示
web技
■スタイルシートで設定する
※<head>〜</head>に記述して下さい。
※スタイルシートに background-attachment:fixed; と記述すると背景画像が固定されます。
※下記の例示は背景画像を1枚にする技を併記しています
-----次の行から(copy)-----
<style type='text/css'>
<!--
body {
background-image:url("photo/002.gif");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
</style>
-----上の行まで(copy)-----
■htmlのタグにstyle設定する
※<body〜>に記述して下さい。
※下記の例では背景画像は連続して表示されます
-----次の行から(copy)-----
<body style="background-image:url('photo/002.gif');background-attachment:fixed;">
-----上の行まで(copy)-----
解説等
◆背景画像を固定化する技ですが、IE限定技だと思います
※表(table)やセルに設定した背景画像は表と一緒にスクロールします
【適用技】
[技g002]背景画像を1枚だけ表示する、を適用して背景画像を1枚だけウィンドウの中央に表示しています。
keyword
◇background-attachment:fixed
history
◇(2004.10.04)actionのリンク文字をクリックすると｢固定解除｣｢固定｣が切り替えることができるようにしました(特に解説はしていません)。
◇(2004.09.25)設置
注意
◆このファイルで実際に動作しているスクリプトは外部jsスクリプトにしています。
◆サンプルファイルはその都度、新しいウィンドウにタグや文章を書き込んでいます(技[k009]参照)。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----