Un problema para la mayoría de desarrolladores webs es el buscar algún fondo creativo para su sitio, la mayoría opta por algún color básico que se logra sencillamente con el código:
body {
background-color: #codigodelcolor;
}
Mientras que otros prefieren colocar de fondo alguna imagen que prevaleza la esencia del sitio web, para eso se usa el código CSS:
body {
background: url(images/fondo.jpg) no-repeat;
}
Pero qué pasa si la imagen es de baja resolución?
Lo que sucederá será que no veremos el fondo completo en el sitio, tan solo una esquina según el tamaño de la imagen, para verla completa en todo el sitio, así tengamos que bajar por la barra de desplazamiento y querramos seguir viendo la imagen de fondo estática y a fullscreen existe algunas directrices CSS que permitirán crear este efecto.
Colocando lo siguiente en nuestro archivo principal CSS:
body {
background: url(images/fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #333;
line-height: 1;
}
Podremos ver la imagen que querramos (en este caso fondo.jpg) ocupando todo el ancho y la altura de la página sin alterarse al seguir desplazando el sitio, una muy buena alternativa para los que recién se inician con la maquetación web y por supuesto el css.