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


Answers

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 .

Question

¿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?




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:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>



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

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Podemos agregar fácilmente múltiples imágenes usando CSS3. podemos leer en detalle aquí http://www.w3schools.com/css/css3_backgrounds.asp