サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
　HTMLリファレンス
　スタイルシート
　JavaScript
　PHP/データベース
WEBデザイン
　デザインテクニック
　素材集/テンプレート
　ウェブ配色の見本
　ユーザビリティ
WEB運営
　ウェブの開設と運営法
　アクセスアップの技
　アフィリエイト (WEB広告)
　ドメインとサーバー
特集・トピックス
　Web広告で収入を得る
　独自ドメインの利点
　使えるWeb作成ソフト
　Webデザイナーになるには
　SEOでアクセスアップ
　光ファイバーの導入
リンク集
　ウェブ作成リンク
　無料リンク
　オンラインソフトリンク
　ユーザーリンク
　ウェブコラム
　参考文献一覧
　サイトマップ
　このサイトについて
　お問い合わせ
　eWebホーム
Home >> スタイルシート >> 背景画像を固定する

背景画像を固定する



サンプルと機能

→ Sample：BODYタグの背景画像を固定する

背景画像を固定します。
画面をスクロールしても背景画像は止まったままになります。
通常は、BODYタグにのみ使用します。
ブラウザによっては正常に動作しない場合があります。


スタイルシート・サンプル

緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。

→ ページ全体に適用する場合
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY {
  background-image: url("img/sbgi06.gif"); /* 全体の背景画像 */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: 50% 50%;            /* 背景画像の位置は画面中央 */
  background-attachment:fixed;             /* 背景画像を固定する */
}
TABLE {
  background-image: url("img/sbgi05.gif"); /* 全体の背景画像 */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: right bottom        /* 背景画像の位置は右下 */
}
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>


解説・注意点など

使用スタイル：background-attachment
指定可能な値：fixed, scroll

通常はBODYタグにのみ使用します。
固定する場合はfixed、内容と共にスクロールさせるにはscrollを指定します。
何も指定しない場合はscrollになります。


 
 

← スタイルシートに戻る

 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, CSS Samples. All rights reserved. - Home -