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:

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'.

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ˇ >>
CSS en catalÓ
Darrera actualitzaciˇ: 11 de gener de 2004

© 2002-04, weC - Gonzalo PÚrez de la Ossa
Contacte: wec@dense13.com

Valid XHTML 1.0! Valid CSS!