Embedded Files
背景画像の位置(background-position)と固定(background-attachment)
背景画像の位置(background-position)と固定(background-attachment)
背景画像の位置(background-position)
スタイル名：値
background-position: 50% 50%
background-position: left top
値：px,ptや%、
left, right, center, top, bottom
例
ｾﾚｸﾀ {
background-image: url(img01.gif);
background-repeat: no-repeat;
background-position: 50% 50%
}
ｾﾚｸﾀ {
background-image: url(img01.gif);
background-repeat: no-repeat;
background-position: right bottom
}
適用できる要素
背景画像の位置を指定するための
スタイル。
横位置、縦位置の順。
スペースで区切って書く。
１つしか指定しなかった場合は、
横のみ任意指定とみなされ、縦位置の値は自動的に50%になる。
位置を示すキーワードでは、
leftとtopは「0%」、centerは「50%」、
rightとbottomは「100%」と指定した
場合と同じ。
ブラウザ表示
アップルの画像を背景にして、
右下に配置 というソースを
書いてみました。
→
<body style="background-image:url(app.jpg);
background-repeat:no-repeat;
background-position:right bottom;">
<h1 style="background-image:url(bkG2.jpg);
background-repeat:repeat-y;
color:white">見本です</h1>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
背景画像の固定(background-attachment)
background-attachment:fixed;
値：fixed, scroll
例
ｾﾚｸﾀ {
background-image: url(img01.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment:fixed;
}
背景画像を固定とは．．．
画面をスクロールしても背景画像は
止まったままというスタイル。
通常は（指定なし）スクロールすると、
背景も中身(テキストや画像)も一緒に
動いてく。
fixed： 固定
scroll：スクロール
何も指定しない場合はscroll
!ブラウザによっては正常に動作しない場合あり!
スクロールしてみてね。
りんごの画像を真ん中に配置して、
固定というソースになってます。
→
<body style="background-image:url(app.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
background-attachment:fixed">
<h1 style="background-image:url(bkG2.jpg);
background-repeat:repeat-y;
color:white">見本です</h1>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
背景をまとめて設定する
ｾﾚｸﾀ{ background: url(ファイル名) no-repeat 50% 50% fixed }
背景に関して利用できる値を必要なだけ、
任意の順序でスペースで区切って書くことができる！
Page updated
Google Sites
Report abuse