Les pàgines web normalment afegeixen imatges mitjançant l'etiqueta HTML "img" en línia. La codificació CSS normalment no estableix la font d’una imatge perquè CSS controla el disseny més que el contingut. Tot i això, el CSS admet propietats que l'HTML simple no, com ara l'opacitat de la imatge. Per exemple, si voleu que aparegui una foto transparent de la seu de la vostra empresa a la pàgina d'inici del vostre lloc web, podeu configurar-la mitjançant CSS. Els estils CSS trien les fonts d’imatges mitjançant la propietat de la imatge de fons.
1
Obriu el full d’estils del lloc web amb l’editor HTML o un editor de text.
2
Enganxeu el codi següent al full per crear un estil nou:
imatge de fons: URL (camí); background-repeat: no repetir; amplada: 10 px; alçada: 20 px; }
3
Substituïu "ruta" per l'URL de la imatge al lloc. Per exemple, si la imatge "building.jpg" es troba a la carpeta "images" del vostre lloc, canvieu el codi a:
imatge de fons: url (/images/building.jpg); background-repeat: no repetir; amplada: 10 px; alçada: 20 px; }
4
Substitueix "10" per l'amplada de la imatge i substitueix "20" per l'alçada de la imatge. Per exemple, si la imatge mesura 200 píxels d'alçada i 600 píxels d'ample, canvieu el codi a:
imatge de fons: url (/images/building.jpg); background-repeat: no repetir; amplada: 600 px; alçada: 200 px; }
5
Obriu la pàgina web on voleu inserir la imatge.
6
Afegiu el codi següent per inserir la imatge:
