Path relativo per riferimenti a immagini nei css

Nessun Commento

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

Web Specialist e Business Developer Laureato nel 2003 al primo corso di Laurea sull’Information Technology in Italia, seguo, vivo e lavoro con passione nei campi del web marketing, web design e web development. Metto le mie conoscenze e le mie capacità al servizio di aziende italiane e straniere cercando di sviluppare non solo l’apparato tecnologico ma anche la rete commerciale e di marketing per aiutarle a vendere di più e con più semplicità. Nel corso della mia carriera lavorativa ho lavorato in importanti realtà come Microsoft Irlanda, Tim, Alfio Bardolla Training Company in qualità di designer o sviluppatore web e marketer. Sono anche il fondatore di Ecletticamente, un network di autori e coach in ambito crescita personale, seduzione, miglioramento, relazioni.. che ha come obiettivo la promozione dei suoi autori e la fornitura di contenuti di qualità per i suoi utenti.