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の位置)が適用されます。

関連記事

2024.08.19

HTML・CSS

縦書き文字の配置について

縦書きの文字を写真の左上・左中・左下・右上・右中・右下に配置します。デモページはこちら 以下のhtml構造で確認します。 CSSはpositionとtransf…

2020.10.08

HTML・CSS

CSSのfilterプロパティの使用例

デモページはこちら CSSのfilterプロパティの使用例をまとめました。filterプロパティはIE11でサポート外ですが、種類が豊富で実装が簡単です。 ■ …

2021.09.13

HTML・CSS

nth-childの関数表記でカラムごとにCSSを設定

デモページはこちら 3カラムで複数行のコンテンツに、カラムごとに背景色のCSSを設定します。3カラムの場合、1カラム目は:nth-child(3n + 1)、2…

2020.12.28

HTML・CSS

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

2020.08.30

HTML・CSS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

上に戻る