Establecer un color de fondo de página web antes de que cargue la imagen de fondo

Tengo una aplicación web y la imagen de fondo es de color oscuro. También tiene más de 100 KB de tamaño. (Realmente no aprecio que la imagen de fondo sea tan grande, pero eso no es algo de lo que pueda hacer nada, ni el tema de esta pregunta ... ¡Además es un JPEG! ... El diseño web ha venido del cliente y yo ¡tengo que dejarlo como está, a pesar de mis protestas!)Establecer un color de fondo de página web antes de que cargue la imagen de fondo

Como la imagen de fondo se compone principalmente de colores oscuros (casi negros), el texto es blanco.

El problema es que la primera vez que el usuario va a la página web, el fondo es blanco (fondo predeterminado del navegador) y el texto también es blanco, por lo que no puede leer el texto. Solo después de que se haya cargado la imagen de fondo, puede leer el texto. (La página carga un archivo CSS, esto carga otro archivo CSS, y en esto se especifica la imagen de fondo. Por lo tanto, en una conexión de alta latencia como la conexión a internet móvil UMTS, esto puede demorar unos segundos)

Es Hay alguna forma de decir "el fondo de esta página debe tener una imagen de fondo particular (como ahora) pero además debe tener el color negro, es decir, negro se mostrará hasta que la imagen de fondo se haya cargado, o si no se carga" ? De esa manera, el usuario podría leer el texto inmediatamente. Estoy seguro de que he visto esto hecho (¿o era ese fondo de celda de tabla?) Pero lamentablemente no puedo recordar cómo y Google no me ayudó.

El CSS actual es:

body { 
    background: transparent url(bg.jpg) top left no-repeat; 
}

he añadido "negro" a la propiedad "fondo", pero esto no ayuda.

Fuente

2011-03-02 Adrian Smith

¿Agregó "negro" y sacó "transparente" al mismo tiempo? –

¡Ah! No puedo creer que me haya perdido eso ... ¡Gracias a todos los que respondieron! –

En realidad, es bastante fácil, basta con cambiar el código que ya tiene:

body { 
    background: #000 url(bg.jpg) top left no-repeat; 
}

El transparent no es el color de fondo del elemento de cuerpo, ahora se establece en negro.

Como dices que se carga lentamente (a través de dos archivos CSS), podría parpadear en blanco. Esto se puede evitar mediante el uso de una etiqueta <style> en la sección de su documento <head>:

<style type="text/css"> 

body { 
    background: #000 url(bg.jpg) top left no-repeat; 
} 

</style>

Esto debería hacer que el fondo negro de inmediato :)

Fuente

2011-03-02 11:54:39 Kyle

Esto debe hacerlo

body { 
    background: url(bg.jpg) top left no-repeat #000; 
}

Esto se aplicará el color negro de su cuerpo.

Fuente

2011-03-02 11:53:18 JohnP

Las respuestas anteriores deberían funcionar, pero en caso que no lo hacen aquí hay otro truco. Puede usar javascript para precargar la imagen y luego actualizar el estilo del cuerpo para usar la imagen que cargó como fondo.

Puede ver un ejemplo usando jquery aquí http://jqueryfordesigners.com/image-loading/. En realidad, creo que eso es lo que necesitas.

Fuente

2011-03-02 12:00:07 ptigas

Establecer un color de fondo de página web antes de que cargue la imagen de fondo

Respuesta

Cuestiones relacionadas