2011-06-19 16 views
7

Estoy tratando de usar una imagen de fondo en CSS, pero aunque di la ruta completa de la imagen, no funciona. Firebug muestra "Error al cargar la URL dada". Estoy seguro de que no hay ningún problema de permiso en esa carpeta. Mi clase CSS esImagen de fondo de CSS URL que no se carga

body { 
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC; 
color: black; 
font: 13px/1.2em arial,helvetica,clean,sans-serif; 
height: 100%; 
position: relative; 
} 

¿Cuál podría ser la causa del problema?

Respuesta

23

Está utilizando una ruta de acceso local. ¿Es eso realmente lo que quieres? Si es así, es necesario utilizar el prefijo file:///:

file:///H:/media/css/static/img/sprites/buttons-v3-10.png 

obviamente, esto sólo funcionará en su computadora local.

Además, en muchos navegadores modernos, esto funciona solo si la página también está en una ruta de archivo local. El direccionamiento de archivos locales desde las páginas remotas (http://, https://) ha sido ampliamente desactivado por razones de seguridad.

9

La ubicación de origen debe ser la URL (relativa al archivo CSS o ubicación web completa), no una ruta completa del sistema de archivos, por ejemplo:

background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png"); 
background: url("static/img/sprites/buttons-v3-10.png"); 

Alternativamente, se puede tratar de utilizar file:/// prefijo de protocolo.

10

Sé que esto es muy viejo, pero estoy publicando mi solución de todos modos ya que google encuentra este hilo.

background-image: url('./imagefolder/image.jpg'); 

Eso es lo que hago. Dos puntos significa perforar un directorio más cerca de la raíz ".." mientras que uno "." debe significar comenzar donde se encuentra como si fuera root. Estaba teniendo problemas similares, pero agregué que lo solucionó para mí. Incluso puedes salir del "." cuando subes a tu host porque debería funcionar bien siempre y cuando la configuración de tu directorio sea exactamente la misma.

Cuestiones relacionadas