background-position: 背景画像の表示位置を指定
background-position: 値;
background-image が設定されている場合に有効です。
横方向、縦方向の順番で画像の位置を表示します。
プロパティ仕様
値 | 説明 |
---|---|
left | 左寄せ left centerと同じ意味 top , bottom , center と併用 |
right | 右寄せ right centerと同じ意味 top , bottom , center と併用 |
top | 上揃え center topと同じ意味 left , right , center と併用 |
center | 中央揃え center centerと同じ意味 top , right , left , bottom , center と併用 |
bottom | 下揃え center bottomと同じ意味 left , right , center と併用 |
実数値 | px, pt, mm, cm, % など |
background-position
background-position: left top; /* 左上 */
background-position: center top; /* 上中央 */
background-position: right top; /* 右上 */
background-position: center left; /* 左中央 */
background-position: center center; /* 真ん中 */
background-position: center right; /* 右中央 */
background-position: left bottom left; /* 左下 */
background-position: center bottom; /* 下中央 */
background-position: right bottom; /* 右下 */
background-position: 20px 10px; /* 左上から右に20px, 下に10px */
background-position: 30% 70%; /* 左上から右に30%, 下に70% */
background-position: 固定された背景画像の位置
サンプル
sampleというクラス名の背景画像にsample.gifを右下に固定
sample css ↓
.sample{
height: 100px;
width: 300px;
border: #ddd 1px solid;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
html ↓
<html>
<body>
<div class="sample">スタイルシートはいいね</div>
</body>
</html>
実際の見え方 ↓
スタイルシートはいいね