Antecedentes escalable HTML CSS Javascript

StackOverflow https://stackoverflow.com/questions/2200391

Pregunta

¿Alguien sabe de una manera de tener una escala de la imagen de fondo a las dimensiones de la ventana del navegador que está? Sé CSS3 permite una anchura de fondo, pero necesito algo más compatible.

Muchas gracias,

Elliott

¿Fue útil?

Solución

No se puede hacer con un background-image, ya que no es compatible con el tamaño. Usted tiene que fingir poniendo una etiqueta img que se extiende a 100% en ambas direcciones y colocarlo detrás de su contenido mediante el posicionamiento absoluto y z-index. Algo como esto debería funcionar: 

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

Y en CSS: 

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

No he probado, pero que debería darle algunos entrantes por lo menos.

Otros consejos

Aquí está el truco (de http://css-tricks.com / cómo-a-resizeable-imagen de fondo / )

Definir su imagen como esta: 

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

y el CSS como esto: 

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

Si usted planea tener una pantalla muy ligero, está bien.
Pero si va a utilizar una imagen como fondo de una página llena de gente, he aquí algunas razones por las que abandonó esta funcionalidad:

  • Algunos navegadores tuvieron dificultades para que sea rápida:. La primera vez, durante el cambio de tamaño de ventana y reflujos

  • Para cada imagen que teníamos que pasar mucho tiempo para encontrar un equilibrio entre el tamaño del archivo y la definición de la imagen. No es fácil con la creciente base de usuarios con grandes pantallas.

  • Incluso intentamos cargar primero una versión de baja resolución de la imagen, mientras que el grande estaba cargando. Se dio un efecto muy agradable, pero que consume más recursos del navegador

Una vez que nos dejó la imagen estirada, nuestra aplicación fue rápido de nuevo y nos dejó dilatar al jugar con la imagen;)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top