fondo-dinamico-css

¿No habéis visto ninguna web en el que el fondo tenga valor fixed y nos siga? ¿No os gustaría crear algo mejor, que el fondo fuera dinámico y cambiase depende de donde estemos en la página? Aquí aprenderemos a crear fondos dinámicos en nuestra web a medida que vayamos “scrolleando” el sitio web.

Es muy sencillo y podréis ver varios ejemplos muy originales.

Empezemos:

  1. La estructura sería esta, 2 divs, uno en la cabecera y otro en el cuerpo del documento.
<html>
  <head>
    ...
  </head>
  <body>
    <div class="header">
      ...
    </div>
    <div class="content">
      ...
    </div>
  </body>
</html>

Ahora el código CSS para aplicar la clase a los divs:

.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}

¡Eso es todo! Se pueden ver unos ejemplos a continuación:

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4

Ejemplo 5 (Clicka en “Play” arriba del sitio web)



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!