La imagen de fondo no aparecerá

Tengo una imagen de fondo que quiero repetir (repetir-x), sin embargo, cuando intento ver la página, no aparece nada. También estoy usando javascript para usar un archivo CSS diferente para diferentes momentos del día, sin embargo, estoy seguro de que ese no es el problema porque firebug muestra que el archivo CSS se agregó al encabezado.

Editar: el problema es que el navegador no puede encontrar el archivo, sin embargo, cuando intento vincularlo, todavía no puede encontrar el archivo.

Puede descargar el archivo del sitio aquí: http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip Son solo 200 kb aproximadamente. Nada masivo.

preguntado el 08 de noviembre de 11 a las 09:11

No estoy seguro de lo que hace Firebug en términos de verificación de recursos, pero en Chrome puede ver si la ruta de la URL (en la pestaña de recursos) apunta a un archivo válido. ¿Quizás el navegador no puede ubicar su imagen de fondo? -

4 Respuestas

Como no hay texto en su encabezado, el div no se mostrará. Intente seguir css

#header {
    background-image:url(img/night/night-time-tile.png);
    background-repeat:repeat-x;
    position:absolute;
    height:100px;  // Adjust height according to your image height 
    top:0;
    left:0;
}

respondido 08 nov., 11:13

Si tiene el navegador Chrome, inspeccione el elemento donde debería aparecer la imagen de fondo.

Coloca el cursor sobre la declaración de la imagen de fondo en la ventana de Firebug.

background-image:url(img/night/night-time-tile.png);

y verá la ruta completa de la imagen.

En la captura de pantalla, puede ver el equivalente del logotipo de stackoverflow en la parte superior de la página.

Luego puede hacer clic en la declaración css y cambiar la URL hasta que encuentre la ruta correcta para su imagen.

enter image description here

respondido 08 nov., 11:14

Esto me ayudó mucho. Terminé teniendo que cambiar el nombre del archivo y luego funcionó. No tengo ni idea de por qué, pero funciona ahora. ;) - Mythrillic

¿Y está seguro de que la ruta a su archivo de imagen es correcta? ¿Firebug carga la imagen?

Su estructura de archivos probablemente sea así

index.html
css/
    style.css
img/
    night/
        night-tile.png

Ahora, de tu style.css tienes que usar una ruta relativa a tu archivo de imagen. Entonces no img/night/night-tile.png pero ../img/night/night-tile.png. En tu camino está buscando la imagen dentro del css directorio, que es incorrecto.

== Actualización ==

Después de descargar su código, encontré 2 errores más.

La primera es que te olvidaste de agregar rel=stylesheet de las personas acusadas injustamente llamadas <link> elemento en el que enlaza a su hoja de estilo. De esta forma, los navegadores no sabrán que es una hoja de estilo.

La segunda es que olvidó agregar un ; al final de su primera regla en su night.css, lo que da como resultado un error de análisis que hace que no se procese la regla de fondo.

¡Buena suerte solucionando estos problemas!

respondido 08 nov., 11:14

Supongo que puede buscar la ruta en su máquina / servidor, ¿no? - vindia

Puedo, pero no parece funcionar. Comprimiré el sitio y te daré el enlace. - Mythrillic

¿Has probado también los otros consejos? Su encabezado debe tener algo de altura antes de que pueda usar un fondo (imagen o color). - vindia

Sí, lo hice, pero ninguno de ellos pareció ayudar. - Mythrillic

Sí, me acabo de dar cuenta de eso y también agregué rel=stylesheet a él y funciona ahora. Gracias ;) - Mythrillic

El elemento no tiene altura (ni explícita ni por contenido).

Esto significa que no hay píxeles visibles del elemento para ver la imagen.

respondido 08 nov., 11:13

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.