【CSS】背景画像を真ん中より少しずらした位置に配置

こんにちは！

マルチメディア部所属でウェブ制作したりゲームしたりゲームしたりたまにお絵かきしています、おとがわです。

今回書くのはbackground-positionでの背景の位置指定についてです。

やりたいことがあって、調べてもよくわからずうーーんってなっていたので、覚書きです。

（他のサイトを見ても、初心者思考でよくわからなくて見逃していましたので鈴木さんに助けてもらいました。）

やりたいこと

中央にたいして背景画像を何ピクセルかずらす

こういうイメージです

background-position: right;でいいじゃんってなりますけど、画像を加工せずに画像をはみ出させたいのです。

そんな時に使ったのはcalcです。カルクと読むのでしょうか？

cssで計算式を可能にしてくれるようです。

background-position: calc(50% + ずらしたい数値);

で解決しました。

ちなみにbackgroundで一気に羅列させたらなぜかIEでは反応しなかったのでバラにして書きました。

対応ブラウザはコチラを参考にしてください。

やりたいことが解決した時のすっきり感がすごいです！

アイキャッチ

気持ち悪くなってしまいました。