1. Inicio
  2. Pregunta y respuesta
  3. ¿Puedo tener múltiples imágenes de fondo usando CSS?

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

2009-01-08 15 views
299

¿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.¿Puedo tener múltiples imágenes de fondo usando CSS?

He descubierto que puedo conseguir el efecto deseado durante dos imágenes de fondo al establecer el fondo de HTML y el cuerpo:

html { 
    background: url(images/bg.png); 
} 

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

¿Es esta "buena" CSS? hay algun metodo mejor? ¿Y si quisiera tres o más imágenes de fondo?

Fuente

2009-01-08 Rudd Zwolinski

Respuesta

368

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

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

The current versions of all the major browsers now support it, sin embargo, si usted necesita para apoyar IE8 o por debajo, entonces la mejor manera que puede trabajar alrededor de ella 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; 
}

Fuente

2009-01-08 03:45:22 nickf

+27

Varios fondos son compatibles con las últimas versiones de Firefox, Chrome, Safari y Opera. También será compatible con IE9. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets) –

+4

Y si desea tener diferentes configuraciones de repetición/posición, puede hacer esto: http://www.css3.info/preview/multiple-backgrounds/ – Krisc

+2

Para IE8 - IE6, puedes usar PIE.js. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/curing-css3-headaches-in-older-browsers/ –

1

Puede tener un div para la parte superior con un fondo y otro para la página principal, y separe el contenido de la página entre ellos o coloque 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.

Fuente

2009-01-08 03:44:13

4

Sí, es posible, y ha sido implementado por la facilidad de uso popular sitio web de prueba 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 Vitamin. Un concepto similar para envolver estas capas de "piel de cebolla" se puede encontrar en A List Apart.

Fuente

2009-01-08 03:51:09

3

En realidad no es una article, que le diga cómo hacerlo con un filtro IE en el archivo CSS .

Espero que sea útil.

Fuente

2010-11-13 03:12:20

4

Si desea que varias imágenes de fondo, pero no quiere que se superponen, se puede utilizar 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>

Fuente

2011-02-02 07:28:46 rachel

32

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

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

Obviou astutamente, 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.

Fuente

2011-03-11 02:48:28 TheLibzter

+0

Tenga en cuenta que esto funciona solo con el fondo y no con background-image –

22

uso de 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 que ajustar cada posición de la imagen con background-position: y establezca la propiedad de repetición con background-repeat: para cada imagen individual

Fuente

2013-07-23 08:27:10

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>

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

Fuente

2016-04-06 18:05:05 Rinku

Cuestiones relacionadas

 Cuestiones relacionadas