¿Cómo convierto una propiedad de position de background de CSS de porcentajes a píxeles?

Estoy centrando un background en este momento (usando background-position: 50% 50%; ), que me gustaría animar usando Javascript. Pero, quiero ser capaz de animar esto utilizando mediciones de píxeles. De hecho, quiero establecer la position de background en algo así como "50% + 10px". ¿Es esto posible usando Javascript?

Posiblemente puedo hacerlo al encontrar la altura de la image de background y la altura de la pantalla del browser y hacer algo de aritmética, pero esto parece una solución intrincada.

One Solution collect form web for “¿Cómo convierto una propiedad de position de background de CSS de porcentajes a píxeles?”

En el futuro, esto será posible utilizando la function calc de CSS3. Pero como eso no es ampliamente respaldado en este momento, a continuación se muestra una solución más práctica.

Simplemente use la notación incremental que jQuery admite para estas properties. Por ejemplo

 $(some-element).css({ "background-position": "+=10px" }); 

Esta syntax fue soportada por $ .animate antes de que fuera compatible con $ .css, pero las versiones recientes de jQuery lo admiten en ambos casos.

Aquí hay un jsfiddle demostrándolo en acción .

  • ¿La mejor forma de empaquetar varias templates de jQuery en una sola xHttpRequest?
  • Ruby on Rails: cómo se ejecuta require en application.js
  • la salida backbonejs alterna después de cada actualización
  • Verificando si un enlace de descarga funciona sin download el file
  • Cómo mostrar recuadros de alerta según si se marca una checkbox o no se usa Javascript
  • jQuery: intentando agregar las opciones para seleccionar la label
  • Devolución de llamada de Google Plus One Button: ¿hay alguna manera de "suscribirse" a la acción +1?
  • ¿Por qué el jQuery Colorbox funciona correctamente en Mozilla Firefox y no funciona en Google Chrome en el siguiente escenario?
  • Evento de desplazamiento jQuery iframe (IE)
  • El restablecimiento de formulario no funciona con jquery
  • POSTING base64 data JavaScript / jQuery
  • jquery / javascript eliminar div si jpg no coincide
  • Obtener los parameters de url dentro de la página html
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.