background-attachmentプロパティ

TOPページに戻る > CSS

スポンサード リンク

background-attachmentプロパティ

背景画像を固定するか、スクロールするか選べます
通常はマウスでスクロールすると背景もスクロールしていきますが、値にfixedを指定するとスクロールしても画像は固定されます

使い方(書式)

セレクタ { background-attachment: 値; }

background-attachmentプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
fixed 背景画像を固定する
scroll 背景画像をスクロールする。background-positionプロパティの指定がない場合はscrollが初期値になっています

実際の指定方法

.hoge { 
 background-attachment: fixed;      /* 背景画像を固定 */
 background-position: left top;     /* 左上の位置に表示 */
 background-repeat: no-repeat;      /* 1枚だけ表示 */
 background-image: url(maru.gif);   /* 背景画像の指定 */
 }
.hoge2 { 
 background-attachment: scroll;     /* 背景画像をスクロールさせる */
 background-position: left top;     /* 左上の位置に指定 */
 background-repeat: no-repeat;      /* 1枚だけ表示 */
 background-image: url(maru.gif);   /* 背景画像の指定 */
 }

html部分

<body class="hoge">

実際の表示

ページの左上に表示しています。値はfixed



(C)2012 ホームページ作成無料