Posicionamiento de imágenes de fondo múltiples

Question

Tengo tres imágenes de fondo, todas de ancho 643px. Quiero que se establecen así:

• imagen superior (altura de 12 píxeles) no-repeat

• imagen del medio repetición-y

• imagen inferior (12px altura) no repetir

No puedo verlo sin que se superpongan (lo cual es un problema porque las imágenes son parcialmente transparentes), ¿es posible algo así?

background-image: url(top.png), 
        url(bottom.png), 
        url(middle.png); 

background-repeat: no-repeat, 
        no-repeat, 
        repeat-y; 

background-position: left 0 top -12px, 
        left 0 bottom -12px, 
        left 0 top 0; 

Answer 1

Su problema es que el repeat-y va a llenar toda la altura, sin importar dónde la coloque inicialmente. Por lo tanto, se superpone a su parte superior e inferior.

Una solución es empujar el fondo que se repite en un pseudo elemento colocado fuera del contenedor por el 12px en la parte superior e inferior. The result can be seen here (la opacidad en la demostración es solo para mostrar que no hay superposición). Sin opacidad, see here. El código en cuestión (probado en los navegadores CSS3: IE9, FF, Chrome):

CSS

div { 
    position: relative; 
    z-index: 2; 
    background: url(top.png) top left no-repeat, 
       url(bottom.png) bottom left no-repeat; 
} 

div:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* push it to the background */ 
    top: 12px; /* position it off the top background */ 
    right: 0; 
    bottom: 12px; /* position it off the bottom background */ 
    left: 0; 
    background: url(middle.png) top left repeat-y; 
} 

Si necesitan o quieren el apoyo de IE8 (que no es compatible con múltiples antecedentes), entonces usted podría poner el fondo superior en el div principal y coloque el fondo inferior utilizando el pseudo elemento div:after ubicado en la parte inferior del contenedor.

Answer 2

Intenta hacerlo de esta manera:

background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat; 
    } 

EDIT: fue sólo un ejemplo, pero aquí es el css con el CSS:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat; 
     } 

Answer 3

Si usted puede agregar relleno/fronteras al bloque igual a los fondos que desea colocar sin solaparse otro bloque, se puede utilizar el background-clip & background-origin para posicionar los fondos superior e inferior sobre las Juntas/fronteras, y la repetición fondo sobre el contenido/paddings + contenido.

Aquí se muestra un ejemplo: http://dabblet.com/gist/2668803

Para su código, usted posiblemente necesita añadir algo como esto:

padding: 12px 0; 
background-clip: padding-box, padding-box, content-box; 
background-origin: padding-box, padding-box, content-box; 

o

border: solid transparent; 
border-width: 12px 0; 
background-clip: border-box, border-box, padding-box; 
background-origin: border-box, border-box, padding-box; 

Y obtendrá lo necesitas.Si no puede obtener los rellenos/bordes, el pseudo-elemento como ScottS mencionado funcionaría perfectamente.

Answer 4

Aquí es un método que utiliza 3 divs para cada uno de los Top, Medio, y Bottom imágenes que son transparentes para aplicar a su página web.

El fondo de pantalla es opcional.

Probado en navegadores modernos y es compatible con IE8.

Este método le permite tratar el elemento cuerpo, ya que debe ser tratada, es decir, su margen de beneficio página web hace no necesitan estar en un envase o elemento que contiene.

jsFiddle Example
jsFiddle Example with centered filled

Dado que el ejemplo anterior utiliza el contenido de imagen titular lugar que es sin transparencia para Top y las imágenes de fondo, se puede verificar marcado trabaja con transparencia con este jsFiddle que utiliza iconos de mini transparentes en el modo de repetición HERE.

Answer 5

La única forma (práctica, no amenazante para el cabello) que veo es hacer eso en Javascript, cuando la página se ha cargado, y cuando se cambia de tamaño, con un lienzo del tamaño adecuado para el interior y las 3 imágenes: dibujar el primero, una vez en la parte superior, dibuja el segundo tantas veces como sea necesario para cubrir el resto del lienzo y dibuja el tercero en la parte inferior del lienzo. Coloque el lienzo en 0,0 con un índice Z ridículamente negativo.

He probado 3 imágenes (643 x 12, 100 y 12) y, por supuesto, el primer problema que vi es que la tercera imagen se dibuja sobre parte de la última iteración de la segunda imagen, a menos tienes una altura de ventana de exactamente 12 + 12 + (p2.height * X), ​​tendrás cierta superposición. Pero eso es esperado, ¿verdad?

Answer 6

Creo que z-index solucionará esto porque z-index solo afecta a los elementos de NIÑO, lo que significa que no puedes estropear nada más en la página que usa z-index.

superior e imágenes de fondo z-index:3;

imagen del medio z-index:2;background-repeat:repeat-y;

Answer 7

De hecho, me encontré una solución más simple, porque estaba teniendo el mismo problema con una navegación horizontal.

En lugar de agregar código como las demás respuestas, solo tiene que listarlo de manera diferente en su CSS. La imagen del centro que se repite debe aparecer en último lugar, no primero ni segundo.

En mi código que se parece a esto:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif); 
background-position: left, right, center; 
background-repeat: no-repeat, no-repeat, repeat-x; 

Answer 8

una manera radical pero eficaz para hacer frente a esto, si:

1. desea aplicar fondos sin solapamiento a una ": antes "
2. la ": antes de" elemento como un conocido altura max

---

&:before { 
    background: url('vertical-line.png') no-repeat 0px, 
       url('vertical-line-repeat.png') no-repeat 140px, 
       url('vertical-line-repeat.png') no-repeat 200px, 
       url('vertical-line-repeat.png') no-repeat 260px, 
       url('vertical-line-repeat.png') no-repeat 320px, 
       url('vertical-line-repeat.png') no-repeat 380px, 
       url('vertical-line-repeat.png') no-repeat 440px, 
       url('vertical-line-repeat.png') no-repeat 500px, 
       url('vertical-line-repeat.png') no-repeat 560px, 
       url('vertical-line-repeat.png') no-repeat 620px, 
       url('vertical-line-repeat.png') no-repeat 680px, 
       url('vertical-line-repeat.png') no-repeat 740px; 
}