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 |
Saludos.
Cua es el tamaño ideal de la imagen ?
ResponderBorrarme salvaste la vida compañero muchas gracias buen aporte
ResponderBorrarExcelente! Gracias por el aporte.
ResponderBorrarGracias Bro, nadie lo explico tan bien como tu, mi pagina sera un éxito, Dios te bendiga
ResponderBorrareres un genio tio!!
ResponderBorrargracias amigo me salvaste!!!
ResponderBorrargracias un buen post me sirvio mucho y funciono al 100
ResponderBorrarMuchí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!
ResponderBorrarGracias Amigo me sirvio mucho!! Un Saludo!
ResponderBorrarGracias!!!
ResponderBorrarGracias!!!
ResponderBorrarOS AMO TIOS JRASIAS
ResponderBorrarMuchas Gracias
ResponderBorrardisculpa 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
ResponderBorrarya le vas mediendo en height: 100%;
Borrarwidth: 100%;
y en el #full-screen-background-image {
z-index: -999;
width: 100%;
así le hice yo :'v
Muchisimas Gracias <3
ResponderBorrarmuchisimas gracias :)
ResponderBorrarMuchas gracias :)
ResponderBorrarLlevo una hora buscando, y me lo has solucionado en 1 minuto. Gracias.
ResponderBorrar