¿Cómo subir un nivel en la ruta src de una URL en HTML?

101

Estoy almacenando hojas de estilo en {root} / styles mientras que las imágenes están en {root} / images para un sitio web. ¿Cómo doy la ruta en las hojas de estilo para buscar en el directorio de imágenes las imágenes especificadas?

por ejemplo, en background-image: url('/images/bg.png');

html css relative-path aateeque
fuente

Respuestas:

184

Úselo ..para indicar el directorio principal:

background-image: url('../images/bg.png');
día solitario
fuente
Lo leí en otra parte también, ¡pero no funciona! (al menos en Chrome)
aateeque
27
Lo hace. Sin embargo, tenga en cuenta que la ubicación es relativa a la ubicación del archivo CSS, no al documento que incorpora el archivo CSS.
ThiefMaster
1
@ThiefMaster Debería ser así si solo usamos CSS en línea
1000Gbps
57

Aquí está todo lo que necesita saber sobre las rutas de archivo relativas:

  • Comenzando con / regresa al directorio raíz y comienza allí.

  • Comenzar con ../ mueve un directorio hacia atrás y comienza allí

  • Comenzar con ../../ mueve dos directorios hacia atrás y comienza allí (y así sucesivamente ...)

  • Para avanzar , simplemente comience con el primer subdirectorio y siga avanzando.

¡Haga clic aquí para más detalles!

S. Akruwala
fuente
52

Utilizar ../:

background-image: url('../images/bg.png');

Puede usar eso tantas veces como desee, por ejemplo, ../../images/o incluso en diferentes posiciones, por ejemplo ../images/../images/../images/(igual que, ../images/por supuesto)

ThiefMaster
fuente
9

En Chrome, cuando carga un sitio web desde algún servidor HTTP, tanto rutas absolutas (p /images/sth.png. Ej. ) Como rutas relativas a algún directorio de nivel superior (p. Ej.../images/sth.png ).

¡Pero!

Cuando carga (¡en Chrome!) Un documento HTML desde el sistema de archivos local, no puede acceder a los directorios por encima del directorio actual. Es decir, no puede acceder ../something/something.sthy cambiar la ruta relativa a absoluta o cualquier otra cosa no ayudará.

jaboja
fuente
1
Al volver a verificar, puedo informar que las rutas relativas del sistema de archivos local al usar ../funcionan bien, ¡o al menos funcionan bien en este caso específico!
aateeque
1
Funciona en linux y windows, no en mac (mi experiencia)
gabn88
Los enlaces no cuentan aquí, ya que no existe la misma verificación de origen para ellos. Además, esta respuesta tiene 6 años, por lo que los navegadores pueden haber cambiado mucho.
jaboja
1
Solo estoy confirmando para cualquier otra persona que vea la respuesta
Ajay
0

Supongamos que tiene la siguiente estructura de archivos:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

En CSS puedes acceder image1, por ejemplo, usando la línea ../images/image1.png.

NOTA : Si está utilizando Chrome, es posible que no funcione y obtendrá un error de que no se pudo encontrar el archivo. Tuve el mismo problema, así que eliminé todo el historial de caché de Chrome y funcionó.

A.Tressos
fuente
0

Si almacena hojas de estilo / imágenes en una carpeta para que varios sitios web puedan usarlas, o si desea reutilizar los mismos archivos en otro sitio en el mismo servidor, descubrí que mi navegador / Apache no me permite ir a cualquier carpeta principal por encima de la URL raíz del sitio web. Esto parece obvio por razones de seguridad: no se debería poder navegar por el servidor en ningún lugar que no sea las carpetas web especificadas.

P.ej. no funciona: www.mywebsite.com/../images

Como solución alternativa, utilizo Symlinks:

Vaya al directorio de www.mywebsite.com Ejecute el comando ln -s ../images images

Ahora www.mywebsite.com/images apuntará a www.mywebsite.com/../images

Leendert
fuente