JavaScript a background-position: Jak napozicovat obrázek v pixelech vůči aktuální poloze?
Na pozadí elementu máme napozicovaný obrázek například takto:
body { url(‚/img/obrazek_pozadi.jpg‘) center top no-repeat; }
Obrázek je úplně nahoře (osa y) a vycentrovaný na střed (osa x). Místo center můžeme použít 50% a místo top 0%.
Představte si situaci, že ho potřebujeme pomocí JavaScriptu posunout o 60 pixelů vlevo (na ose x). V jQuery jsem nenašel způsob, jak to nějak jednoduše udělat. Přes $(‚body‘).css(‚background-position‘); mohu sice zjistit jeho pozici v procentech, ale nikoli v pixelech, což znamená, že nemáme 60 pixelů od čeho odečíst.
Pozici lze ale spočítat:
(((šířka_obrázku – šířka_elementu) / 2) + posun) * -1;
Konkrétní příklad může vypadat takto:
var left = (((1980 – $(‚body‘).width()) / 2) + 60) * -1;
$(‚body‘).css(‚background-position‘, left + ‚px 0%‘);