TOP ＞ スタイルシートで背景をデザイン ＞ 背景画像の固定
背景画像の固定
Webページがディスプレイにおさまらない長さの場合、訪問者はページを閲覧するためにスクロールします。このとき、 通常の設定ですと、背景画像は要素とともにスクロールします。
たとえば、背景に大きめの画像を繰り返しなしで使用し、背景の画像位置を固定して使いたい場合、 css/スタイルシートで背景画像のスクロールを禁止することが出来ます。
背景画像を固定するには「background-attachment」 プロパティを使用します。このプロパティは要素ごとに指定することが出来ます。 デフォルトでは"scroll"値となっていて、スクロールします。
基本的な使い方はbody要素に"fixed"してWebページ全体の背景を固定する方法だと思います。
背景画像の固定
【書き方】
background-attachment : [scroll | fixed] ;
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{background-color:#bbffff; font-size: 28px; background-position: center center; background-image: url(http://www.1css.net/sample/303.gif); background-repeat: no-repeat; background-attachment: fixed; } 【HTML本文】 <html> <head> <title>背景画像を固定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/305.css" type="text/css"> </head> <body> <p>普通は、背景画像は<br /><br /> 要素をスクロールすると、<br /></br /> 背景画像も一緒にスクロールします。<br /><br /> このサンプルページでは、<br /><br /> background-attachmentプロパティの<br /><br /> 値をfixedに<br /><br /> 設定しています。<br /><br /> なので、要素を<br /><br /> スクロールしても<br /><br /> 背景画像は<br /><br /> 中央位置から<br /><br /> 移動しません。</p> <p>念のため、もう一回繰り返します。</p> <p>普通は、背景画像は<br /><br /> 要素をスクロールすると、<br /></br /> 背景画像も一緒にスクロールします。<br /><br /> このサンプルページでは、<br /><br /> background-attachmentプロパティの<br /><br /> 値をfixedに<br /><br /> 設定しています。<br /><br /> なので、要素を<br /><br /> スクロールしても<br /><br /> 背景画像は<br /><br /> 中央位置から<br /><br /> 移動しません。</p> </body> </html> |
[
スタイルシートで背景をデザイン ]
