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:

lu dijo...

Cua es el tamaño ideal de la imagen ?

fotomundocr dijo...

me salvaste la vida compañero muchas gracias buen aporte

Diego Silva DCV dijo...

Excelente! Gracias por el aporte.

Alejito SSJ dijo...

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

Anónimo dijo...

eres un genio tio!!

Anónimo dijo...

gracias amigo me salvaste!!!

Anónimo dijo...

gracias un buen post me sirvio mucho y funciono al 100

Anónimo dijo...

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!

mejorabdelilah11 dijo...

Gracias Amigo me sirvio mucho!! Un Saludo!

Zas dijo...

Gracias!!!

Zas dijo...

Gracias!!!

Anónimo dijo...

OS AMO TIOS JRASIAS

Hopeless Wolf dijo...

Muchas Gracias

Anónimo dijo...

Gracias

Anónimo dijo...

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

InquisitorVicious dijo...

Muchisimas Gracias <3

Erreape Santacrew dijo...

muchisimas gracias :)

Anónimo dijo...

Muchas gracias :)

Anónimo dijo...

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

Mónica S. Mariano dijo...

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

Publicar un comentario