El objetivo de este código CSS es lograr lo siguiente:
- que la imagen llene el fondo sin dejar espacios en blanco y fijarla.
- escalar imagen de ser necesario.
- mantener proporción de imagen (relación de aspecto).
- imagen centrada en la página.
- que sea multi-navegador (cross-browser).
Esto se logra con un par de trucos CSS y por supuesto una imagen de gran tamaño (en la mayoria de los casos). Pero, mediante CSS3 es posible realizar esto sin sufir mucho, ya que se cuenta con la propiedad background-size. La usamos en el elemento HTML.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Una explicación general: hemos especificado la imagen, la hemos centrado y fijado; y con la propiedad background-size le indicamos que cubra toda la página.
Ver demo. Este código funciona con navegadores de versiones recientes.
Bueno el título del post dice CSS3 pero también podemos probar algunos códigos CSS para navegadores con versiones no tan actuales.
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Ver demo. El código funciona con todas las versiones de Safari, Firefox, Opera, Chrome y IE9 (versiones anteriores IE tienen un problemita).
¿Quieres saber otro truco CSS? ¿Sabías que es posible hacer esto con jQuery? Ver artículo completo
Gracias por el tip!!! Salu2 😉
I need it for really, blogs and articles, many thanks
muchas gracias, he logrado mi objetivo gracias a este post
Solo Inserto eso en las paginas html?
o lo pongo con funcion include(); de php, lo en lazo a un archivo .css?
buen aporte