manipulación del valor de la posición de fondo

Question

Tengo un proyecto en el que estoy construyendo diapositivas que se describen dentro de un archivo XML, pero que requiere posicionar las diapositivas en función de los valores de desplazamiento.

Ahora tengo descendencias Y, el único problema ahora es que necesito la capacidad de compensar algo en la X por una cantidad, pero aún así mantener el comportamiento% 'valor de edad.

Entonces, básicamente, ¿hay alguna manera de tener x inicio de posición de fondo en 50% y luego compensarlo por una cantidad de píxeles y mantener el comportamiento relativo de% 'edad (50% + offsetInPixels)?

Answer 1

No puede hacer eso con CSS simple (en este momento, vea Rich Bradshaw's answer).

Se podría lograr eso en javascript con algo como:

var totalWidth = 960; 
var xOffset = 10; 
el.style.backgroundPosition = ((totalWidth/2) + xOffset) +"px 50px"; 

Answer 2

yo diría que su mejor apuesta está pegando la imagen de fondo como una imagen dentro del containter ... Es poco de un truco, pero works Además, considere (como dijo Jesse) agregar overflow:hidden si no desea que se vierta el bg.

<div id="main" > 
<div id="bg"><img src="http://www.google.com/images/logos/ps_logo2.png"/> </div </div> 

#main { 
width:400px; 
    height:300px; 
    background-color:blue; 
    position:relative; 
} 
#bg { 
margin-left: 10px; 
    position:absolute; 
    width:100%; 
    height:100%; 
    margin-left:50%; 
    } 

demostraron: http://jsfiddle.net/mhy3r/10/

Answer 3

usted puede hacer esto, pero no se admite ampliamente.

background-position: -moz-calc(50% - 20px) 0; 
background-position: calc(50% - 20px) 0; 

Actualmente (mayo de 2011) esto solo funciona en Firefox 4 e IE9.

Consulte http://caniuse.com/#calc para ver la compatibilidad.

Answer 4

Encontré otra solución usando CSS3. Sin embargo, requiere que el contenedor tenga un tamaño fijo.

HTML:

<div id="example">Example</div> 

CSS:

#example { 
    width: 200px; 
    height: 200px; 
    padding-left: 100px; 
    background-origin: content-box; 
    background-position: 10px 10%; 
} 

Es un poco de un truco supongo. En lugar de comenzar la posición de fondo desde la esquina superior izquierda de la casilla de borde, utiliza en su lugar el cuadro de contenido que tiene un relleno del 50% (es decir, 100 px). Como dije, necesitarás saber el valor exacto de 50% de relleno porque escribir padding-left: 50%; se interpretará como el 50% del elemento padre.

Si necesita todo el espacio interior de este recipiente se puede poner otro <div> en ella con margin-left: -100px;