martes, 12 de marzo de 2013

Cómo hacer que la imagen de fondo cubra toda la pantalla

Desarrollando un proyecto personal me topé con la necesidad de poder establecer una imagen como fondo de una página web de tal manera que ésta pueda ocupar todo el tamaño de la pantalla. Exiten muchas formas de hacerlo, incluso utilizando JQuery, sin embargo en esta oportunidad quiero presentarles una manera de hacerlo sin la necesidad de utilizar un framework como el mencionado anteriormente, ni javascript y menos flash.

La primera manera de hacerlo es simplemente agregando los siguientes estilos en la sección 'head' de nuestro archivo.
<style type="text/css">
    html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    #full-screen-background-image {
        z-index: -999;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }
</style>
Luego de esto debemos indicar cual será la imagen que usaremos de fondo, de la siguiente manera:
<body>
    <img alt="full screen background image" src="img/background.jpg" id="full-screen-background-image" /> 
</body>
Otra manera de hacerlo utilizando CSS3 es la siguiente:
html {
    background: url(img/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Y los resultados son los siguientes:

Figura. Imágen de fondo a pantalla completa en navegador Chrome
Y si tienen algún problema con Opera, les recomiendo el siguiente enlace: http://dev.opera.com/articles/view/css3-border-background-boxshadow/. Espero que este artículo les sea de utilidad, me despido hasta una siguiente oportunidad.

Saludos.

20 comentarios:

  1. Cua es el tamaño ideal de la imagen ?

    ResponderEliminar
  2. me salvaste la vida compañero muchas gracias buen aporte

    ResponderEliminar
  3. Gracias Bro, nadie lo explico tan bien como tu, mi pagina sera un éxito, Dios te bendiga

    ResponderEliminar
  4. gracias amigo me salvaste!!!

    ResponderEliminar
  5. gracias un buen post me sirvio mucho y funciono al 100

    ResponderEliminar
  6. Muchísimas gracias!! Hace tiempo lo estaba buscando, había probado con un montón de scripts y nada funcionó. La solución era tan simple!

    ResponderEliminar
  7. Gracias Amigo me sirvio mucho!! Un Saludo!

    ResponderEliminar
  8. disculpa y si ahora lo que quiero es que me aparezca a loa ancho pero de alto sea menos como le hago, para poner una medida o algo asi

    ResponderEliminar
    Respuestas
    1. ya le vas mediendo en height: 100%;
      width: 100%;
      y en el #full-screen-background-image {
      z-index: -999;
      width: 100%;
      así le hice yo :'v

      Eliminar
  9. Muchisimas Gracias <3

    ResponderEliminar
  10. Llevo una hora buscando, y me lo has solucionado en 1 minuto. Gracias.

    ResponderEliminar