2012-01-30 17 views
11

Hice una cinta en Photoshop. La cinta tiene tres partes. Las partes izquierda y derecha son un 10px fijo. El sectoin medio es un patrón repetible.Múltiples imágenes de fondo en un div

¿Es posible combinar estas imágenes como fondo de mi etiqueta?

+2

Solo en CSS3 puede tener múltiples fondos para un elemento, entonces sí, pero no todos los navegadores lo soportarían. – j08691

+0

Aquí hay otra posible solución para el problema. Si puede cambiar el fondo para que esté compuesto por dos imágenes, puede usar la técnica que se explica aquí: http://www.alistapart.com/articles/slidingdoors2/ –

Respuesta

16

como @ j08691 dicho, sólo en CSS3

#yourTag { 
background-image: url(one.png), url(two.png); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 
width: 300px; 
height: 350px; 
} 

aquí se tiene una: good example

+0

Buena solución. Pero, por lo que leo, no funciona en todos los navegadores ... en mi opinión, está lo suficientemente extendido como para usarlo, pero depende de su público objetivo. Usar con precaución. – blo0p3r

0

sólo es posible con CSS3 para navegadores modernos.

.element{ 
    background-image: url(key.png), url(stone.png); 
} 
1

Simplemente agregue una clase a la etiqueta, luego use CSS y agregue el fondo a esa clase. Esto no funciona en Internet Explorer 8 o anterior Código

div 
{ 
background:url(smiley.gif) top left no-repeat, 
url(sqorange.gif) bottom left no-repeat, 
url(sqgreen.gif) bottom right no-repeat; 
} 

es de http://www.w3schools.com/cssref/css3_pr_background.asp

Para conseguir que funcione en otras versiones de IE se puede usar algo como CSS3Pie http://css3pie.com/documentation/supported-css3-features/#pie-background Sin embargo, me gustaría probar a fondo antes de poner el código live

Cuestiones relacionadas