2

Supongamos que escribimos en un navegador la petición: "http://ejemplo.com/index.php" y el navegador recibe esa página con un CSS en la cabecera que tiene el atributo:

background-image: url(/assets/img/imagen.jpg);

¿Como es capaz el navegador de resolver correctamente la ubicación "remota" del archivo imagen.jpg teniendo en cuenta que los CSS se procesan "localmente" en el navegador y que no hemos especificado la url completa en la función url()?

2 respuestas 2

2

Las direcciones se procesan usando como base la dirección URL del archivo que contiene el CSS. Puede ser un css de otro dominio/servidor, en ese caso las rutas se resuelven usando la ruta relativa o absoluta de dicha pagina:

Ej1: Pagina http://ejemplo.com/index.php Contiene un CSS http://ejemplo2.com/css/style.css (otro dominio)

Ej2: Pagina http://ejemplo.com/index.php Contiene un CSS http://ejemplo.com/css/style.css (o /css/style.css)

Igualmente para los @import, cada URL dentro de las declaraciones de CSS son relativas a la ubicacion del archivo CSS.

2

En el ejemplo que pones, sí le estás entregando una ruta absoluta, sólo que como no le estás entregando un dominio, asume que es el mismo que el actual:

background-image: url(/assets/img/imagen.jpg);

Significa:

buscar la imagen en http://www.midominio.com/assets/img/imagen.jpg

Donde el host (www.midominio.com) es el mismo host desde donde estás viendo la página.

Obviamente si le especificas otro dominio, entonces allá lo buscará:

background-image: url(http://www.otrodominio.com/assets/img/imagen.jpg);

Y si especificas una ruta relativa:

background-image: url(../img/imagen.jpg);

Significa:

buscar el archivo un directorio más arriba del presente archivo CSS, y luego entrando a la carpeta img

Ojo, que usar rutas relativas cuando importas hojas de estilos usando @import implica que las rutas serán relativas al archivo que importa al otro.

Por ejemplo, en un esquema como el siguiente

  - css
    - style.css
    - subestilos
      - cabecera.css
  - img
    - logo.png

Si en cabecera.css quisieras referenciar el logo, le pondrías la ruta relativa desde cabecera.css.

background-image: url(../../img/logo.png);

Pero si en tu página usas solamente style.css y éste importa los subestilos haciendo

@import subestilos/cabecera.css;     

Tendrías que cambiar las imágenes para usar la ruta delativa desde style.css.

background-image: url(../img/logo.png);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.