#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background-attachment

background-attachment

背景画像の固定

background-attachmentプロパティは、ページのスクロール時に画面のスクロールバーに追従して、背景画像もスクロールさせるか否かを指定します。
background-attachment: fixed;は、ボックスに対する固定表示ではなく、ウィンドウに対する固定表示になります。
htmlやbody以外の要素(div要素やp要素等)では動作が変わりますので、下記見本で確認して下さい。
ボックスのスクロールバーと、ブラウザのスクロールバーをゆっくり上下に動かすと動作の違いが分かりやすくなります。

background-attachment: fixed; /* 背景画像は固定してスクロールしない */
background-attachment: scroll; /* 背景画像も一緒にスクロールする */
background-attachment: local; /* 背景画像が要素の内容に対して固定される */

背景画像を固定する

body{
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: fixed;
}

/* 例1-2(div boxに指定)*/
.sample1-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: fixed;
}
例1-2:背景画像を固定しています。(fixed)
ページのdiv boxに指定・表示しています。
background-attachment: fixed; は、背景画像を固定します。
ボックスに対する固定表示ではなく、ウィンドウに対する固定表示です。
ボックスのスクロールバーと、ブラウザのスクロールバーをゆっくり上下に動かすと動作の違いが分かりやすくなります。

背景画像を固定しない

body{
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: scroll;
}

/* 例2-2(div boxに指定)*/
.sample2-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: scroll;
}
例2-2:背景画像は固定していません。(scroll)
ページのdiv boxに指定・表示しています。
background-attachment: scroll; は、背景画像を画面にあわせてスクロールします。
ウィンドウに対するスクロール表示なので、ボックスでは固定表示です。
ボックスのスクロールバーと、ブラウザのスクロールバーをゆっくり上下に動かすと動作の違いが分かりやすくなります。

背景画像を固定しない

body{
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: local;
}

/* 例3-2(div boxに指定)*/
.sample3-2{
   overflow: auto;
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-repeat: repeat;
   background-attachment: local;
}
例3-2:背景画像は固定していません。(local)
ページのdiv boxに指定・表示しています。
background-attachment: local; は、背景画像を画面にあわせてスクロールします。
子要素に対して指定した場合は子要素に対してもスクロールします。
ボックスのスクロールバーと、ブラウザのスクロールバーをゆっくり上下に動かすと動作の違いが分かりやすくなります。