Background Image

Cada vez son más numerosas las webs y blogs que flotan sobre una impresionante imagen. Este fondo puede ser una imagen única o una más pequeña que se repite horizontalmente, verticalmente o ambas.

Los fondos consiguen dar mayor peso gráfico a la web, y sobre todo, captar la atención del usuario.

A continuación vamos a ver unos ejemplos de web con backgrounds, cómo insertar el código en la CSS y un par de sitios en los que poder descargar buenos backgrounds.

Ejemplos de sitios con Background de imágenes

Dzineblog nos muestra una galería de 25 sitios que usan esta práctica, en lo que podéis encontrar desde fondos vectoriales a fotografías, pasando por el grunge, lo retro,… Como ejemplo, os puede servir para comprobar como todo el peso gráfico del sitio queda ampliado por la presencia de estos fondos.

Etiqueta CSS para insertar un Background

Seguramente no haga falta pero os dejo el código para meter un Background.
El Background puede estar ligado directamente a la etiqueta body o insertado en una capa. Un dato a tener en cuenta es que se coloca también un background-color para que no quede la pantalla en blanco hasta que se carga la imagen. Normalmente yo suelo usar colores que se asemejen a la imagen que va a cargar.

body
    {
    background-color: #FFCC66;
    background-image: url("url de la imagen");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    }

Vamos a descifrar el código. Vemos como primero declaro un color de fondo, después escribo la orden para meter el background. La siguiente orden le está diciendo a la CSS que no repita la imagen ni en horizontal ni en vertical.
Cuando tenemos una imagen de fondo, podemos hacer que esta imagen permanezca fija o que se desplace con el movimiento del resto de la página. Los valores de esta propiedad son fixed o scroll.
Otra de las condiciones que podemos establecer es el origen de la fotografía, es decir, cuando colocamos una imagen de fondo generalmente se sitúa en la esquina superior izquierda de la pantalla, con esta orden podemos cambiar ese origen.

Recordemos que estas líneas pueden ser sustituidas por algo mucho más sencillo:

background: #FFCC66 url("url de la imagen") no-repeat fixed right bottom;

Direcciones de interés para descargar Backgrounds GRATIS !!!

Si queréis algo ligero de peso, la mejor solución es meter un patrón que se repita por la pantalla, en notqa.it tenéis unos ejemplos en los que además se marca la zona que debéis cortar como patrón.

Cgtextures tiene una impresionante galería con todo tipo de imágenes y texturas para desarrollar vuestra imaginación. No me he parado a buscar más sitios para este post, porque creo que con estos dos ejemplos podéis haceros buena idea del material que hay disponible, de aquí en adelante todo es buscar la imagen que más se acerque a vuestro diseño. De todos modos serán bienvenidas todas las url’s que consideréis útiles.