Múltiples fondos (background) con CSS

12 de octubre de 2014 19 comentarios ,

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í:

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.

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://lh4.googleusercontent.com/-P-uKwe2FDGU/VDnHT21jkoI/AAAAAAAALkI/i3gzlB0Z5Hg/s450/fondo1.png), url(https://lh6.googleusercontent.com/-7cX2R1ojPR8/VDnLWzxlAMI/AAAAAAAALkY/FYC-_SP-P-w/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://lh6.googleusercontent.com/-qr82X3dc3Kw/VDrX1eJ-haI/AAAAAAAALk4/sQXZl3tB0R0/s116/fondo1.jpg), url(https://lh6.googleusercontent.com/-ldf6AG6_UkU/VDrX1XV6-yI/AAAAAAAALk0/0qQoXoEQT2I/s116/fondo2.jpg), url(https://lh3.googleusercontent.com/-uV3D22K2WHw/VDrX1SdnIII/AAAAAAAALks/OevEuSmNGUk/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.




Araña interactiva para el blog, que se mueve

10 de octubre de 2014 19 comentarios ,

Esto no es como aquella araña de Halloween que vimos hace tiempo que no era mas que una imagen GIF animada. Esto es parte de la modernidad web, hecho en canvas, y se trata de una araña que se mueve por si sola dentro de su telaraña, y que podemos arrastrar con el cursor, tanto a la araña como a la telaraña y sus puntos de apoyo. El demo aquí mismo.



Este gracioso experimento es de Sub Protocol, y nos servirá como parte de las decoraciones de Halloween en el blog. Este arácnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempeño de estas canvas son más eficientes si alojamos los scripts directo en la plantilla, o al menos a mí esa percepción me ha dado.

Para colocar esta araña interactiva en tu blog ingresa en Diseño | Añadir un gadget | HTML/Javascript y ahí pega este código:

<script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>

Si quieres también puedes hacer que sea "flotante", es decir, que permanezca estática sin importar si subimos o bajamos el scroll de la página. Para conseguirlo sólo añade lo siguiente debajo del código anterior.

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo cámbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha cámbialo por right. Toma en cuenta que al hacerla flotante podría obstruir algún elemento de tu blog que quede por debajo de ella.

Con esta araña, esta próxima noche de brujas tú y tus lectores podrán entretenerse un rato en el blog jugando con ella, eso sí, no la saques de su red o la pobre morirá :(

 
Ir Arriba Ir Abajo
I Ciudad Blogger