Le pagine Web normalmente aggiungono immagini utilizzando il tag HTML "img" inline. La codifica CSS di solito non imposta l'origine di un'immagine perché CSS controlla il design piuttosto che il contenuto. Tuttavia i CSS supportano proprietà che il semplice HTML non supporta, come l'opacità dell'immagine. Ad esempio, se desideri che una foto trasparente della sede della tua azienda appaia sulla home page del tuo sito web, puoi impostarla utilizzando CSS. Gli stili CSS scelgono le origini delle immagini utilizzando la proprietà dell'immagine di sfondo.

1

Apri il foglio di stile del tuo sito web con il tuo editor HTML o un editor di testo.

2

Incolla il codice seguente nel foglio per creare un nuovo stile:

styledimg {

immagine di sfondo: url (percorso); background-repeat: nessuna ripetizione; larghezza: 10px; altezza: 20px;

}

3

Sostituisci "percorso" con l'URL dell'immagine all'interno del sito. Ad esempio, se l'immagine "edificio.jpg" si trova nella cartella "immagini" del tuo sito, modifica il codice in:

styledimg {

immagine di sfondo: url (/images/building.jpg); background-repeat: nessuna ripetizione; larghezza: 10px; altezza: 20px;

}

4

Sostituisci "10" con la larghezza dell'immagine e sostituisci "20" con l'altezza dell'immagine. Ad esempio, se l'immagine misura 200 pixel di altezza e 600 pixel di larghezza, modifica il codice in:

styledimg {

immagine di sfondo: url (/images/building.jpg); background-repeat: nessuna ripetizione; larghezza: 600px; altezza: 200px;

}

5

Apri la pagina Web in cui desideri inserire l'immagine.

6

Aggiungi il seguente codice per inserire l'immagine: