Secció 3: Propietats
2. Propietats relacionades amb el color i el fons (background)
2.5. background-position
Aquesta propietat especifica la posició inicial de la imatge de fons.
Pot rebre un sol valor o bé dos valors separats per espai. Si en rep dos, el primer representarà la posició horitzontal i el segon la vertical. Si només en rep un, aquest estableix únicament la posició horitzontal, i la vertical prendrà el valor 50%.
Cadascun d'aquests dos valors pot ser:
- Una longitud. Indica la posició de la cantonada superior esquerra de la imatge respecte la cantonada superior esquerra de l'element. La posició serà en direcció horitzontal o vertical segons sigui el primer, el segon o l'únic valor de la propietat.
- Un percentatge. Un percentatge de n% indica que el punt situat al n% de la imatge coincidirà amb el punt corresponent al n% de l'àrea que ocupa l'element. Com en el cas anterior, les mesures seran horitzontals o verticals segons el valor sigui el primer, el segon o l'únic.
Nota: les posicions de la imatge es calculen respecte l'extrem de l'àrea padding de l'element que la conté. El concepte 'àrea padding' l'estudiarem a l'apartat 4.2 'Parts d'una caixa'.
- top, center, bottom. Només per al valor vertical. Corresponen als valors 0%, 50% i 100% respectivament.
- left, center, right. Només per al valor horitzontal, o quan s'ha especificat un únic valor. Corresponen als valors 0%, 50% i 100% respectivament.
El valor per defecte és 0% 0%, que correspon a top left.
Els valors de longitud i percentatge poden ser negatius. Quan s'especifiquen dos valors es poden combinar longituds amb percentatges, però no amb paraules clau. Quan utilitzem paraules clau podem triar l'ordre de les mateixes. Per exemple top left equival a left top.
Alguns exemples de background-position:
P {
background-image: url(imatges/fons1.gif);
background-repeat: no-repeat; }
P.tipus1 { background-position: 2cm; }
P.tipus2 { background-position: 74% 20%; }
P.tipus3 { background-position: right bottom; }
/* equival a 100% 100% */
P.tipus4 { background-position: right; }
/* equival a 100% 50% */
P.tipus1: el valor 2cm indica la posició horitzontal, és a dir, que l'extrem esquerre de la imatge es situa a 2cm de l'extrem esquerre de l'element. Com que només s'especifica un valor, la posició vertical pren el valor 50%; el punt situat a un 50% de l'alçada de la imatge (és a dir, el centre) es situa al 50% de l'alçada de l'element. Dit amb altres paraules, la imatge de fons queda centrada verticalment i desplaçada 2cm respecte l'extrem esquerre.
P.tipus2: el punt corresponent a un 74% de l'amplada de la imatge i un 20% de la seva alçada es situa a un 74% de l'amplada de l'element i a un 20% de la seva alçada.
P.tipus3: la cantonada inferior dreta de la imatge està situada a la cantonada inferior dreta de l'element.
P.tipus4: 'right' correspon a un valor horitzontal de 100%; la posició 100% de la imatge (és a dir, l'extrem dret) es situa, doncs, a la posició 100% de l'element (també l'extrem dret). La imatge queda centrada verticalment, com passava al paràgraf de tipus 1.
Si canviem el valor de background-repeat, la imatge se situarà com acabem de veure, i llavors es repetirà en la direcció indicada tantes vegades com sigui necessari per omplir l'espai ocupat per l'element.
Nota: l' 'espai ocupat per l'element' és l'àrea de contingut més l'àrea padding, però no les àrees border ni margin. Veurem tots aquests conceptes més endavant, a l'apartat 4.2 'Parts d'una caixa'.
Si la imatge és més gran que l'espai ocupat per l'element, només es mostrarà la part de la imatge corresponent a aquest espai.
Pregunta
Quin és l'style sheet que genera paràgrafs com el que ara mateix estàs llegint? He afegit una vora al paràgraf per delimitar-lo (igual que als exemples que hem vist fa un moment). A l'apartat 4 veurem com es fan. De moment preocupa't només de situar i definir correctament la imatge de fons.
Solució >>background-image: url(fons.gif);
background-repeat: repeat-y;
background-position: right; }
(Hi ha altres solucions equivalents).
