Quiz? en alg?n momento quieras usar dos im?genes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo m?s recurrente es crear dos o m?s contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o m?s im?genes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.
En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ah? agregar las URLs de las im?genes, separadas por una coma. Por ejemplo, si quisi�ramos a?adir dos im?genes al fondo del blog ser?a algo as?:
Lo m?s recurrente es crear dos o m?s contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o m?s im?genes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.
En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ah? agregar las URLs de las im?genes, separadas por una coma. Por ejemplo, si quisi�ramos a?adir dos im?genes al fondo del blog ser?a algo as?:
body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}
Y para cambiar su posici?n usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y despu�s ponemos la otra posici?n.
body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}
Ah? hemos dicho que la primera imagen se acomodar? en el lado superior izquierdo, y la segunda en el lado inferior derecho.
Tambi�n podemos especificar si se repetir?n las im?genes o no.
Tambi�n podemos especificar si se repetir?n las im?genes o no.
body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
Si tambi�n queremos a?adir un color de fondo podemos hacerlo usando background-color.
body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
Puedes ver un ejemplo con el DIV que est? a continuaci?n, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.
M?ltiples Fondos con CSS
Este es el c?digo completo que he usado para el ejemplo anterior.
CSS
#doblefondo {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WoxgFzkVwnTCaZce8Tnx8DplTRT_t5Ay0oxtYLqu4MlUHSw-KtwdAam4YSJ3frbVakP9E_wjOrxCojpg8wWR9N_5G3xNqesGQKUOvMQTDjJ4mmA9rCXuxxitUKAztCEvpfbkil-ebh7_/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQdlSDB7TVjDg-daCz9Qz-o26q3Ky_bQvbXZb3W-dvM-qh7UJm3RUVeQaja4D__ihUW92jROUkc3P9rRPO9_uaWkDtGquh3i2CAfz2pi6coy1VU94DZfV7pKD7yYuoa5BlIX5peiuaeQO/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}
HTML
<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>
Pero el n?mero de im?genes no es una limitante ya que podemos usar tres o m?s y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, a?adimos tres im?genes de fondo, cada una tiene una posici?n diferente, y la tercera se repetir? horizontalmente.
Este es el c?digo completo.
CSS
#doblefondo {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOguTs4hArTRC6QkJAoPXTuvUYvPsfYLC51nP1x9lbVOn3kMr3FUC56mhaYgNX3OUTw72kfEQIrfZxPvblneswGQbZ-eXTQ-XCT-1K2RS8h3sBSIMOiUMaf2hmt4DKD0XsYWceWM5YnbA0/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fsIUHjN7q08pLWvkyVtL4O017cuajHr3GW5otBDTYf8KN-XMDmRQ1q2Dvfwbt5IOjpapuXOYoia_Tufwzeg7nlmWZwJmbWMxB_jecuidEfCP8O4QETpFuaG-1z2LdgEVbeFIIx6y5mAt/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCx5a1F7dizuiqtn20TXF_1n56our4S9KhAr3ZNp_3HA4gR_cRWo4pZkeoih4C4_j97ztdZ6GtDqpskEFm0tu_r4PfSk75TWUxAc0WLN_7uVVSKjbbxGRoGGq_ZOTa0B5uueWRykE6F1w/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}
HTML
<div id="doblefondo">
</div>
Como puedes ver, poner m?s de una imagen de fondo en la plantilla del blog o un contenedor es de lo m?s sencillo. Recuerda siempre separar con una coma las propiedades e im?genes, excepto la ?ltima, esa no lleva coma, s?lo punto y coma.
En el caso de Internet Explorer funciona de la versi?n 9 en adelante as? que pr?cticamente todos lo ver?n ya que por suerte pocos son los que usan versiones anteriores.
En el caso de Internet Explorer funciona de la versi?n 9 en adelante as? que pr?cticamente todos lo ver?n ya que por suerte pocos son los que usan versiones anteriores.
