要素の中心を基準に背景イメージを配置する方法はありますか？

Question

私は背景を適用したいという要素を持っていますが、背景画像をその右の座標に基づいて配置したいと思います。

コンテナdivを使用して背景を表現することはできますが、この状況では実用的ではありません。

私は現在、次のルールがありますので、画像の大きさの大部分の作品のため

.myelem { 
    background-image: url("myelem.png"); 
    background-position: 5% 60%; 
    background-repeat: no-repeat; 
} 

を。可能であれば、背景の相対的な位置がleftの代わりにmiddleであると指定したものを持っていたいと思います。

Answer 1

値としてcenterを受け入れるbackground-position CSSのpropoerty：

.myelem { 
    background-image: url("myelem.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

または簡略版：設定する簡単なCSSの方法はありません1

.myelem { 
    background: url("myelem.png") center center no-repeat; 
} 

更新バックグラウンド位置を中心（または下部または右側）のオフセットに置き換えます。

あなたは、実際の画像にパディングを追加し、ページの読み込み後の位置を計算するためにはJavaScriptを使用して、SO以下の質問で提案されているように要素にマージンを追加することができます。

• HTML background image offset by x pixels from the center
• Offset a background image from the right using CSS

calcを使用して、正しい位置を計算することもできます。この時点では、すべてのブラウザですべてcalc is not supportedですが。

あなたはこのような何かを行うことができCALCを使用して：{：URL（...）中央のセンターなしリピート背景}また、にすべてのことを組み合わせることができ

.myelem { 
    background-image: url("myelem.png"); 
    background-position: 5% 60%; 
    background-position: -webkit-calc(50% - 200px) 60%; 
    background-position: calc(50% - 200px) 60%; 
    background-repeat: no-repeat; 
} 

Demo