2021.07.04

HTML・CSS

background-positionプロパティを利用した背景画像の右寄せ

background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-position: right center;を指定します。
デモページはこちら

.div01 {
	width: 100%;
	height: 300px;
	margin: 0 0 1em;
	background-color: darkslateblue;
	background-image: url(../img/bg_truck.png);
	background-repeat: no-repeat;
	background-size: auto 200px;
	background-position: right center;
}

背景画像を右寄せした位置からX軸方向へ移動させる場合は、キーワードrightの後にpxで数値指定します。マイナスの値を指定することで親要素からはみ出すこともできます。なお親要素にoverflow: hidden;を指定しなくても横スクロールバーは発生しません。

.div02 {
	width: 100%;
	height: 300px;
	margin: 0 0 1em;
	background-color: darkslateblue;
	background-image: url(../img/bg_truck.png);
	background-repeat: no-repeat;
	background-size: auto 200px;
	background-position: right -50px center;
}

なお、right centerのようなキーワードでの指定は順番が逆でも正常に動作します。ただし、パーセントで指定する場合はX軸方向→Y軸方向の順番で指定する必要があります。

background-positionプロパティを指定しなかった場合は、初期値の0% 0%(左上のleft topの位置)が適用されます。

関連記事

2023.02.18

HTML・CSS

異なる親要素を持つ子要素の重なり

異なる親要素を持つ子要素の重なりを、positionプロパティとz-indexプロパティを指定して確認します。デモページはこちら 以下のhtml構造で確認します…

2020.10.30

HTML・CSS

Twitterボタンの設置とカスタマイズ

デモページはこちら Twitterボタンの設置とカスタマイズのまとめです。ボタンのソースコードは以下の公式サイトから生成できます。ただし、jsの読み込みが必要に…

2024.09.13

HTML・CSS

疑似クラス:has()を利用した余白と色の調整

疑似クラスの:has()を利用して、liタグの余白と色を調整をします。デモページはこちら 共通のCSSは以下になります。通常時はulタグにgap: 60pxを指…

2022.08.28

HTML・CSS

親要素にtransformが設定されている場合のposition: fixed;

通常、position: fixed;でtop: 0;left: 0;の場合、画面の左上が基準位置になります。しかし、親要素(先祖を含む)にtransformが…

2024.08.22

HTML・CSS

box-shadowで作る縁取りの枠線

box-shadowプロパティの重なりを利用して、縁取りの枠線を作ります。デモページはこちら box-shadow: 水平方向の距離 垂直方向の距離 ぼかしの距…

上に戻る