背景画像はスタイルシートの指定で、左寄せ、中央寄せ、右寄せ、上寄せ、下寄せがあります。
ですが、今回次のようなことをする必要がありました。
左右中央寄せで＋300px右へずらす
この指定で、頭を悩ませたのが「中央位置から＋300px」です。
なぜならば、画面サイズを変えても中央位置＋３００pxをキープしなければいけないためです。
そんなことができるのか？
と思いつつ、いつものようにググりました。
論より証拠。できたものがこちら
何はともあれ、できたものがこちらです。
（１）普通の中央寄せ
背景画像を普通に中央寄せしたバージョンです。
ウィンドウサイズを広げたり、縮めたりしても、背景画像は中央位置になります。
（２）中央一＋300px右へずらす
背景画像を中央寄席＋３００px右へずらしたバージョンです。
ウィンドウサイズを広げたり、縮めたりしても、中央位置＋３００pxがキープされます。
背景画像を中央位置+300pxにする指定方法
実際に中央位置＋300pxにしている具体的な方法について以下に記載します。
スタイルシートの記述
#sample
{
height: 400px;
background-image: url(bg_img.png);
background-repeat: no-repeat;
background-position: left calc(50% + 300px) center;
}スタイルシートの横位置指定で、なにやら見慣れない記述があります。
それがこちらです。
left calc(50% + 300px)
通常の横中央ならば、centerのみですが、left指定になっています。
いったいどういう仕組みなのでしょうか?
（疑問1）calcは何？
calc()は、計算をする指定です。
calcを使うと、スタイルシート内で計算ができます。
+300pxとすることで、300px右へずらしています。
（疑問2）50%とはどういう意味？
例えば、left 100px というう指定は、左から100pxという意味になります。
では、left 50% と指定すると、左から50%の位置。つまり中央寄せという意味になります。
中央寄せをベースにするため、50%指定をしています。
（疑問3）なぜleft指定なのか?
横中央にする場合、centerを指定します。
ですが、今回の例ではleft指定となっています。
これはcenter指定では、calc()が動作しないためです。
おそらく仕様だと思われますが、calc()を使うために、left指定にしています。
逆にright指定でも大丈夫です。ただしその場合、+300pxにすると、左にずれます。（左右が逆になります）
スタイルシートの進化は目覚ましい
web制作を始めたころは、どちらかというとHTMLで装飾をするのが主流でした。
画像を細かく切って四隅にちりばめたり、見出しを画像にしたりなど、スタイルシートは補助的な役割でした。
ですが昨今は、HTML側では装飾を一切行わず、スタイルシートだけで装飾します。
しかも、画像を使わなくても見出しの装飾ができたりと、とても進化しています。
写真や挿絵は画像にする必要がありますが、装飾という点においては、スタイルシートのみで完結します。
しかも最近では、動的な動作（簡易アニメーションなど）もスタイルシートでできます。
HTMLを組むとは、もはや「スタイルシートを構築する」ということなのです。