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

316

¿Es posible tener dos imágenes de fondo? Por ejemplo, me gustaría que una imagen se repita en la parte superior (repetición-x) y otra en toda la página (repetición), 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?

css background-image Rudd Zwolinski
fuente

Respuestas:

377

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 inferior, la mejor manera de solucionarlo es tener divs adicionales:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
nickf
fuente
27
Múltiples fondos son compatibles con las últimas versiones de Firefox, Chrome, Safari y Opera. También será compatible con IE9. en.wikipedia.org/wiki/…
Šime Vidas
44
Y si desea tener diferentes configuraciones de repetición / posición, puede hacer esto: css3.info/preview/multiple-backgrounds
Krisc
2
Para IE8 - IE6, puede usar PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Aleš Kotnik
1
¿El tamaño de fondo sigue esta misma regla? Quiero que todas mis imágenes de fondo tengan altura completa, excepto una de ellas (que quiero que sea la altura de la imagen).
mtmurdock
Sí, background-size sigue la misma regla (como todas las otras propiedades de fondo). Las propiedades de fondo (generalmente comenzando con el prefijo background- y luego una propiedad específica del fondo) en realidad se pueden especificar dentro de la propiedad de fondo en sí, por lo que dado que se admiten varias imágenes de fondo, también se admiten varias propiedades enumeradas. Esto se aplica al tamaño, posición, repetición, etc.
Cannicide
35

La forma más fácil que he encontrado de 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 sobre esto un poco más en profundidad si alguien necesita más instrucciones o ayuda: http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

TheLibzter
fuente
Tenga en cuenta que esto solo funciona con el fondo y no con la imagen de fondo
yoel halb
24

utilizar este 

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 imagen con posición de fondo: y establecer la propiedad de repetición con repetición de fondo: para cada imagen individualmente

code.rider
fuente
4

Sí, es posible, y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback . Si observa el código fuente, puede ver que el fondo está formado por varias imágenes, una encima de la otra.

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

Mike B
fuente
4

Si desea varias imágenes de fondo pero no desea 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>
rachel
fuente
2 

#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>
Expandir fragmento

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

Rinku
fuente
1

Podría 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 hace puede funcionar, pero dudo que funcione en todos los navegadores que encuentre.

Sean James
fuente