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
- images
- index.htm
- assets
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>
