- プロパティ
-
background-position
- 値
-
単位 | キーワード(下記参照)
[ left | center | right ]
[ top | center | bottom ]
[ パーセンテージ | px | em ]など
- 対象
-
すべての要素
- 継承の有無
-
なし
background-positionサンプル
横方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left top;
(background-position: 0 0;)
}
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left center;
(background-position: 0 50%;)
}
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left bottom;
(background-position: 0 100%;)
}
縦方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: left top;
(background-position: 0 0;)
}
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: center top;
(background-position: 50% 0;)
}
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: right top;
(background-position: 100% 0;)
}
など
[px]を使えばさらに細かな指定可能。
