背景画像を表示させる位置を設定する。

背景画像の初めの表示位置を指定できれば、
ある要素の下部にだけ背景画像を設定したり、
テキストの左側にアイコンを表示できたりします。

今回、その設定に使うのは「background-position」プロパティです。
このプロパティを使用すると、要素の左上から画像までの距離を
数値やキーワードで指定できます。

「position 50px 50px」の場合左上から
右に50px、上から50pxです。

背景画像を固定したいとき

スクロールしたいときに背景画像も通常動きます。
ですが、固定したいときもあるかと思います。
そのときに使用するのが「background-attachment」プロパティです。

設定する値は以下の通りです。
fixed　スクロールしても背景画像を固定
scroll　スクロールをしたら背景画像も宇都く

設定例

上記の例のように、CSSに記載することで
ページをスクロールさせても背景画像を固定することができます。