Gibt es eine Möglichkeit, ein Hintergrundbild relativ zur Mitte eines Elements zu positionieren?

Question

Ich habe ein Element, auf das ich einen Hintergrund anwenden möchte, obwohl ich das Hintergrundbild basierend auf seiner rechten Koordinate positionieren möchte.

Ich könnte ein Container-Div verwenden, um den Hintergrund darzustellen, obwohl es in dieser Situation nicht wirklich praktisch ist.

Ich habe derzeit die folgende Regel:

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

die zum größten Teil wegen der Größe des Bildes arbeitet. Wenn es möglich wäre, hätte ich gerne etwas, das angibt, dass die relative Position des Hintergrunds middle statt left ist.

Answer 1

Die CSS propoerty background-positioncenter als Wert akzeptiert:

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

Oder die Kurzversion:

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

aktualisiert 1

Es gibt keinen einfachen CSS-Weg ist die festlegen Hintergrund-Position zu einem Offset von Mitte (oder unten oder rechts).

Sie padding das eigentliche Bild hinzufügen könnte, Javascript verwenden, um die Position nach dem Laden der Seite, fügt Marge auf das Element zu berechnen, wie in den folgenden SO Fragen vorgeschlagen:

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

Alternativ können Sie calc verwenden, um die richtige Position zu berechnen. Obwohl calc is not supported von allen Browsern an dieser Stelle.

Mit Calc Sie so etwas tun könnte:

.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