CSS: Full Screen Background Image by webintenta

Fuente: webintenta.com

El siguiente ejemplo muestra cómo crear, únicamente con CSS, una imagen de fondo que ocupe la totalidad del fondo de la página para cualquier tamaño de pantalla.

HTML:

<body>
  <img alt="fondo" src="background.jpg"  id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Contenido de la página ...</p>
  </div>
</body>

CSS:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

Ver ejemplo en funcionamiento » »

Visto en »»

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s