Secció 3: Propietats
2. Propietats relacionades amb el color i el fons (background)
2.3. background-image
Aquesta propietat estableix la imatge que s'utilitzarà com a fons d'un element. Els valors possibles són:
- Una adreça.
- none (valor per defecte). No s'utilitza cap imatge.
El més corrent és utilitzar background-image en l'element BODY, per tal d'especificar una imatge de fons per a tot el document. Però en realitat podem fer-ho amb qualsevol element. Probablement els casos més habituals a part de BODY siguin els elements DIV, i potser els títols (H1, H2, ...) i els paràgrafs (P).
Quan utilitzem una imatge de fons, és un bon costum especificar també un valor per a background-color que tingui una tonalitat semblant a la imatge, el qual serà utilitzat si la imatge no està disponible.
El color de fons serà visible a les parts transparents de la imatge, si en té.
P.comentari {
color: black;
background-image: url(imatges/fons1.gif);
background-color: #f2f4e9; /* com a alternativa */ }
A més de la imatge de fons, especifiquem un color de fons, per si la imatge no està disponible, i un color per al text, assegurant-nos que contrasta suficientment amb el fons.
Aquest paràgraf té una imatge de fons (fons1.gif). Si per algun motiu la imatge no es pogués mostrar, com ara que el navegador tingui desactivada la opció 'mostar imatges', el fons passaria a ser el color '#a10'.
Com pots comprovar a l'exemple, la imatge es repeteix (en anglès, tiled image). Aquest comportament es pot controlar amb la propietat background-repeat, que veurem tot seguit.
A continuació veurem les propietats background-repeat, background-position i background-attachment, les quals permeten controlar les característiques de la imatge de fons. Aquestes propietats són irrellevants si no hem especificat cap valor per a background-image.
