背景画像を画面中央から計算し配置する

Question

タイトル通りなんですが、空のdivにCSSで背景画像を挿入して、画面中央から右に200pxの場所に置いて、画面幅に左右されないように設置したいです。
画面が縮まったときにはみでる背景画像は無視する形になります。
調べてもど真ん中に配置するcenterのやりかたしか見つからず苦戦しています。
宜しくお願いします。

Answer 1

「画面中央から右に200pxの場所に置いて」と仰っているので、それは幅が縮んだら画面中央が左にずれるからどうやっても動くと思います。

画面中央＝ページ・コンテンツの中央 より右に置きたい、ということですか？

配置した場所に固定したい場合は

background-attachment: fixed;

を指定しないといけないと思います。
ただ、ページを縦にスクロールしても背景が動きませんが…

Comments

[misonya]

やっぱりそうですね。
”ページ・コンテンツの中央 より右に置きたい”ということで合ってます。
attachment:fixed;も試してたんですが、仰るとおり縦スクロールでも固定されてダメでした…

[NatsumiOki]

なるほど理解しました。
新しいブラウザであればcalc()を使って計算したり、右からの位置指定などが可能です。
しかし、古いブラウザやAndoroidの一部のOSなどだと、対応していないものもありますので使えるかどうかはmisonya様の扱っているプロジェクト次第ですね。

Answer 2

background-position: x y はどうでしょうか？

みのがしているくさいので

数値で指定

背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。数値にはマイナスの値も指定することができます。

別の方法

.main-cont {
   background: url()
}

<div class="row">
<div class="side-cont cell">
</div>
<div class="main-cont cell"
</div>
</div>

的な方法で対応もできますね。

Comments

[misonya]

この方法で試したんですが、画面幅に応じて背景画像も移動されてしまうので、左に置いたコンテンツに被ってしまうんです…
やはり難しいんでしょうか

[asahina_dev]

background-position: 200px 0px

でセンタリングされたということですか

[misonya]

私の書き方が悪かったですね。%を使用しました。
background-position: 70% 0; /* 左上から70%で上から0% */

pxを使用したら画面幅に左右されませんでした。
メディアクエリを使って複数指定したほうが確実にできるっぽいですね。

Answer 3

background-position: calc(50% + 200px) 0px;

Comments

[misonya]

まさにこれです！こんな方法あるんですね！素晴らしいです！
ありがとうございます！