Cómo dejar el fondo estático en una página web

Los diseñadores web, en muchos casos, nos encontramos con la necesidad de dejar un fondo estático (logo de nuestra empresa, marca de agua, etc.) en la página que estamos diseñando, para que, a pesar del scroll, la imagen siempre pueda verse.

Como en otras ocasiones, la solución nos la da CSS, de hecho directamente podemos crear un estilo en nuestra web donde referenciemos la imagen de fondo a través del atributo background-image.

body 
{
background-image: url("inesem.jpg");

}

Con este atributo indicamos qué imagen deseamos en el fondo. Para fijarla recurriremos a los atributos:

• background-repeat: indica si queremos o no scroll vertical.
• background-attachment: indicará si la imagen queda fija o hará scrooll con el resto del texto.

Así pues, nuestro código quedaría como:

body 
{
background-image: url("inesem.jpg");
background-repeat: no-repeat;
background-attachment: fixed
}

Puede descargar el ejemplo completo desde este enlace.

Como podéis comprobar en el ejemplo, con este sencillo código al principio de nuestra web, conseguiremos mantener la imagen que deseemos estática.