Czy istnieje sposób umieszczenia obrazu tła względem środka elementu?

Question

Mam element, na który chcę zastosować tło, chociaż chcę, aby obraz tła był pozycjonowany w oparciu o jego prawidłową współrzędną.

Mogę użyć div pojemnika, który reprezentuje tło, chociaż w praktyce nie jest to praktyczne.

ja obecnie mam następującą regułę:

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

które w przeważającej części działa z powodu rozmiaru obrazu. Gdyby było to możliwe, chciałbym mieć coś, co wskazywałoby, że względna pozycja tła to middle zamiast left.

Answer 1

propoerty css background-position akceptuje center jako wartość:

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

Lub skróconej wersji:

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

Update 1

Nie ma prosty css sposób, aby ustawić położenie tła do przesunięcia środka (lub dołu lub po prawej).

Można dodać dopełnienie do rzeczywistego obrazu, należy użyć javascript, aby obliczyć pozycję po stronie obciążenia, dodać margines do elementu jak zasugerowano w następujących SO pytania:

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

Alternatywnie można użyć calc do obliczenia prawidłowej pozycji. Chociaż calc is not supported przez wszystkich wszystkich przeglądarek w tym momencie.

Korzystanie Calc można zrobić coś takiego:

.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