¿Puedo tener múltiples imágenes de fondo usando CSS?

¿Es posible tener dos imágenes de fondo? Por ejemplo, me gustaría que una imagen se repita en la parte superior (repeat-x), y otra repetición en toda la página (repetir), donde la que está en toda la página está detrás de la que se repite en la parte superior.

Descubrí que puedo lograr el efecto deseado para dos imágenes de fondo configurando el fondo de html y body:

html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } 

¿Es este “buen” CSS? hay algun metodo mejor? ¿Y si quisiera tres o más imágenes de fondo?

CSS3 permite este tipo de cosas y se ve así:

 body { background-image: url(images/bgtop.png), url(images/bg.png); background-repeat: repeat-x, repeat; } 

Las versiones actuales de todos los principales navegadores ahora lo admiten , sin embargo, si necesita admitir IE8 o una versión posterior, la mejor manera de evitarlo es tener divs adicionales:

  
content here
 body{ background-image: url(images/bg.png); } #bgTopDiv{ background-image: url(images/bgTop.png); background-repeat: repeat-x; } 

La forma más fácil que he encontrado para usar dos imágenes de fondo diferentes en un div es con esta línea de código:

 body { background:url(image1.png) repeat-x, url(image2.png) repeat; } 

Obviamente, eso no tiene que ser solo para el cuerpo del sitio web, puede usarlo para cualquier div que desee.

¡Espero que ayude! Hay una publicación en mi blog que habla de esto un poco más a fondo si alguien necesita más instrucciones o ayuda: http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

utilizar esta

 body { background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png); background-repeat: no-repeat, repeat-x, repeat-y; background-position:10px 20px , 20px 30px ,15px 25px; } 

una forma sencilla de ajustar cada posición de la imagen con la posición de fondo: y establecer la propiedad de repetición con la repetición de fondo: para cada imagen individualmente

La versión actual de FF e IE y algunos otros navegadores admiten múltiples imágenes de fondo en una sola statement CSS2. Mire aquí http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ y aquí http://www.quirksmode.org/css/multiple_backgrounds.html y aquí http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Para IE, puede considerar agregar un comportamiento. Mira aquí: http://css3pie.com/

Sí, es posible y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback . Si miras a través del código fuente, puedes ver que el fondo está compuesto por varias imágenes, colocadas una encima de la otra.

Aquí está el artículo que demuestra cómo hacer el efecto se puede encontrar en la vitamina . Un concepto similar para envolver estas capas de “piel de cebolla” se puede encontrar en A List Apart .

Si desea varias imágenes de fondo pero no quiere que se superpongan, puede usar este CSS:

 body { font-size: 13px; font-family:Century Gothic, Helvetica, sans-serif; color: #333; text-align: center; margin:0px; padding: 25px; } #topshadow { height: 62px width:1030px; margin: -62px background-image: url(images/top-shadow.png); } #pageborders { width:1030px; min-height:100%; margin:auto; background:url(images/mid-shadow.png); } #bottomshadow { margin:0px; height:66px; width:1030px; background:url(images/bottom-shadow.png); } #page { text-align: left; margin:62px, 0px, 20px; background-color: white; margin:auto; padding:0px; width:1000px; } 

con esta estructura HTML:

 > 
 #example1 { background: url(http://sofes.miximages.com/css/img_flwr.gif) left top no-repeat, url(http://sofes.miximages.com/css/img_flwr.gif) right bottom no-repeat, url(http://sofes.miximages.com/css/paper.gif) left top repeat; padding: 15px; background-size: 150px, 130px, auto; background-position: 50px 30px, 430px 30px, 130px 130px; } 
      

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Puede tener un div para la parte superior con un fondo y otro para la página principal, y separar el contenido de la página entre ellos o colocar el contenido en un div flotante en otro nivel z. La forma en que lo está haciendo puede funcionar, pero dudo que funcione en todos los navegadores que encuentre.