Path relativo per riferimenti a immagini nei css

Quando ti riferisci a un’immagine, utilizzando uno stile css, devi sempre considerare la posizione del file che richiama l’immagine.

Così se nella tua pagina index.htm, si trova allo stesso livello di una cartella assets – contenente le 3 cartelle images, css, js, – per riferirti all’immagine mia-foto.jpg tramite css dovrai scrivere:

  • mio-dominio.com
    • assets
      • images
        • mia-foto.jpg
      • css
        • main.css
      • js
    • index.htm

Codice della pagina Index.htm

<html>
<head>
<title>Riferirsi all’immagine tramite css</title>
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=”image_bg”>...</div>
</body>
</html>

Mentre nel file main css scriverai

Codice del file main.css

# image_bg {
background:url(../images/mia-foto.jpg) repeat-x 0 0;
}

Tuttavia se avessimo deciso di mettere il codice css direttamente dentro la nostra index.htm, avresti dovuto scrivere

codice della pagina index2.htm

<html>
<head>
<title>Riferirsi all’immagine tramite css</title>
<style>
# image_bg {
background:url(assets/images/mia-foto.jpg) repeat-x 0 0;
}
</style>
</head>
<body>
<div id=”image_bg”>Immagine incroporata</div>
</body>
</html>

Scarica il file di esempio