Artículos
CSS

Fondo estático en una página web

11/Mar/2007

A la hora de realizar diseños mediante HTML y CSS podemos conseguir tener un fondo estático en una página web, independientemente del scroll que el usuario realice sobre dicha página.

Conseguir este efecto dentro una página web nos será útil en muchos casos, por ejemplo cuando queramos tener de fondo un escudo, un logo,… Hay que tener en cuenta que si ponemos una imagen de fondo, por defecto, el fondo, se repetirá tantas veces como extensa sea la página web.

Para tener un fondo estático en una página web nos basaremos en el atributo CSS background. El primer atributo que debemos conocer es background-image. Este atributo nos permite especificar la imagen que se va a poner en el fondo de la página web.

De esta forma el código a utilizar será el siguiente:

body {
  background-image: url('https://lineadecodigo.com/wp-content/uploads/2006/12/w3c.jpg');
}

Utilizaremos la función url() para hacer referencia al archivo a utilizar.

Una vez que tenemos puesta la imagen en el fondo veamos cómo fijarla. Para ello utilizamos otros dos atributos:

  • background-repeat, el cual indica cómo se va a repetir la imagen en el fondo, si verticalmente, horizontalmente, en ambos sentidos o directamente no se va a repetir (valor no-repeat). Este último, será nuestro caso.
  • background-attachment, mediante este atributo indicaremos si la imagen se va a quedar fija (fixed) o hará scroll con el resto de la página (scroll).

Finalmente el código para tener un fondo estático en una página web quedará de la siguiente forma:

body {
 background-image: url('https://lineadecodigo.com/wp-content/uploads/2006/12/w3c.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
}

Simplemente tendremos que poner esta clase CSS en el elemento style de nuestra página web y ya tendremos el efecto perseguido:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Titulo Documento</title>
  <style>
    body {
      background-image: url('https://lineadecodigo.com/wp-content/uploads/2006/12/w3c.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
  </style>
</head>
<body>

<!-- Documento HTML5 -->

</body>
</html>

Cómo podéis comprobar es algo sencillo y de mucha utilidad.

Código Fuente

Descárgate el código fuente de Fondo estático en una página web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
150 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios