El fondo se corta

Lo más común es que al hacer nuestro fondo lo demos un buen ancho, pero siempre hay pantallas más grandes. Además, si la hacemos la imagen muy ancha el peso del archivo también augmenta.

El fondo tarda mucho en cargarse

Al utilizar un fondo grande, lo más común va a ser que tenga un peso considerable, y esto hará que la página tarde en cargarse.

Para solucionar estos problemas, por decirlo de alguna manera, hay dos métodos que podemos usar con el fin de tener un fondo extenso en nuestra web y que se visualice bien en todas las pantallas y con todos los navegadores- o al menos con el máximo posible…

Método 1: Enlazar los bordes con un color de fondo llano

Podemos hacer que una imagen de fondo no quede cortada por los lados y por abajo en pantallas de grande resolución ya sea mediante un degradado o finalizandolo elegantemente. He aquí diferentes ejemplos:

El css sería algo tan sencillo como:

body {
   padding: 0;
   margin: 0;
   background: #111 url(bg.jpg) no-repeat center top;

   /* Para máxima compatiblidad */
   width: 100%;
   display: table;
}

Método 2: El doble fondo

En otros casos puede que no queramos que la imagen finalice por muy grande que sea la pantalla. Esto solo será posible cuando utilicemos un motivo de fondo (un pattern). Este motivo puede que queramos que se repita por toda la página o solo a lo horizontal. Veamos unos ejemplos en los que podemos utlizar este método:

Para conseguir un fondo como el de la primera imagen, tenemos que usar un motivo que se extetienda por todo el body. Luego otra imagen para el brillo. Esta segunda imagen es importante que sea *.png para que funcionen las transparencias. El css quedaría así:

body {
   padding: 0;
   margin: 0;
   background: #666 url(bg.jpg) repeat;

   /* Para máxima compatiblidad */
   width: 100%;
   display: table;
}

#contenedor {
   padding: 0;
   margin: 0;
   background: transparent url(bg.jpg) no-repeat top center;
}

Donde #contenedor será el div donde va a estar contenida toda la información.
Para conseguir un fondo como el de la segunda imagen seguimos el mismo procedimiento que para la primera, pero haremos el fondo del body solo se repita horizontalmente:

background: #9BD1FF url(bg.jpg) repeat-x;

Esto es todo por hoy. Espero que os sea útil. Acordaros de seguir este blog en Twitter o al Feed, porque Tinnta se vuelve a poner las pilas!

Nota: Algunas ideas para el artículo las he sacado de WebDesignerWall