Background-image

Fins ara hem vist que podem posar un color de fons a qualsevol element HTML. Recorda que pel navegador qualsevol element s’entén com una caixa i dins dels seus límits en podem modificar el fons.

La propietat background-image ens permet fer servir imatges de fons. No és incompatible amb background-color, és a dir: un element pot tenir un color de fons i una o més imatges de fons.

Si un element té una imatge de fons i un border visible, el border es veurà per sobre del fons. El color de fons sempre es veurà per darrere les imatges de fons.

Per defecte, el valor de la propietat background-image és «none» i de background-color és «transparent».

Les imatges de fons es poden especificar de dues maneres:

• ruta a la imatge: url(ruta/arxiu.jpg)
• gradient de colors: linear-gradient( to bottom, #FF0000, #00FF00 )

El valor de la propietat background-color pot contenir un o més enllaços i, al mateix temps, un gradient:

background-image: linear-gradient(
    to bottom,
    #FF0000,
    #00FF00
  ), url("gatet.png");

Els lectors de pantalla per a persones invidents (o amb poca visió) no donen cap informació sobre les imatges de fons. Això significa que no posarem com imatge de fons una imatge que sigui necessària semànticament.

Repetició

Per defecte, la imatge de fons es repetirà per tota la caixa de l’element, omplint tot l’espai disponible (algunes podran quedar tallades). Això és així perquè la propietat background-repeat té, per defecte, el valor «repeat». Altres valors possibles són:

• no-repeat
• repeat-x (només es repeteix horitzontalment fins a omplir tot l’espai, algunes imatges poden quedar tallades)
• repeat-y (només es repeteix verticalment fins a omplir tot l’espai, algunes imatges poden quedar tallades)
• space (es repeteixen tantes vegades com sigui possible sense que cap imatge quedi tallada)
• round (es cobrirà l’espai repetint imatges, si alguna ha de quedar tallada horitzontalment totes les imatges es faran més estretes per a fer-li espai. Cap imatge quedarà tallada, però poden perdre les seves proporcions)

background-image:url(https://user0.gesem.es/blog/wp-content/uploads/2023/06/smiley-png-5a3a6b01d58967.8911438215137779218747.jpg);

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat: repeat-y;

background-repeat:space;

background-size:round; 

Posició

Si et fixes, per defecte les imatges de fons es comencen a col·locar des de la part superior esquerra. Això és així perquè els valors de les propietats background-position-x és «left» i la de background-position-y és «top» també.

Les propietats background-position-x i background-position-y es poden indicar amb la propietat simplificada background-position (com ja hem vist amb altres propietats).

Valors possibles de background-position

Podem fer servir les coordenades de la caixa: top right bottom left i, a més el valor «center».

• Si donem un únic valor:
  • Si només li donem el valor «center», la imatge es centrarà verticalment i horitzontal.
  • Si només li donem el valor «left» o el valor «right» la imatge es centrarà verticalment i es col·locarà a l’esquerra (left) o a la dreta (right)
  • Si només li donem el valor «top» o el valor «bottom» la imatge es centrarà horitzontalment i es col·locarà a dalt (top) o a baix (bottom).
  • Si el valor és un percentatge o una distància (ex: 20px), la imatge es centrarà verticalment i es col·locarà al tant per cent de l’amplada (o distància) indicat, sempre respecte a l’esquerra.
• Si donem dues coordenades de la llista «left», «top» «right» «bottom» o «center», un fa referència a l’eix horitzontal (eix X) i l’altre al vertical (eix Y):
  • left top
  • left center
  • right bottom
  • ….
  • (el navegador també entendrà si ho diem al revés)
• Si es donen dos valors i un és un percentatge / distància i l’altre una coordenada de la llista «left», «top» «right» «bottom» o «center», aleshores un farà referència a l’eix X i l’altre a l’eix Y.
  • Si un valor és un percentatge o una distància (ex: 10px) i l’altre és «top» o «bottom», el valor numèric farà referència a l’eix X i la imatge es col·locarà a un percentatge / distància de l’alçada des de la part esquerra i alineat a dalt (top) o a baix (bottom)
  • Si un valor és un percentatge / distància (ex: 10px) i l’altre és «right» o «left», el percentatge farà referència a l’eix Y i la imatge es col·locarà a un percentatge de l’alçada des de la part superior i alienada a la dreta (right) o esquerra (bottom)
• Si es donen dos valors i els dos valors són un percentatge o una distància , aleshores la imatge es col·locarà al percentatge de l’amplada / distància respecte a l’esquerra del primer valor i al percentatge de l’alçada / distància respecte a la part superior del segon valor
• Si es donen 3 valors, els dos primers han de ser una paraula de la llista de coordenades i el tercer valor és una distància (en percentatge o en píxels). Aquest percentatge o distància farà referència a la coordenada que el precedeix:
  • exemple: top right 20%
    

background-position: top right 20%;

background-position: left top 20px;

Mida

Per defecte, la imatge de fons es veurà a la mida real de la imatge (la de l’arxiu jpg, png, gif o webp). Si l’espai és més petit, la imatge sortirà de la caixa (hi haurà una part que no es veurà). Això és així perquè el valor per defecte de la propietat background-size és «auto».

Possibles valors de background-size

Podem modificar les dimensions de la imatge de fons de la següent manera:

Cover

La imatge s’estira prou per cobrir tota la caixa

background-size: cover;

Contain

La imatge s’encongeix o estira prou per veure’s sencera

background-size: contain;

Dimensions

Podem indicar la mida de la imatge de fons és una dimensió fixa (ex: 200px) o en un percentatge (ex: 20%) respecte a l’amplada de la caixa

Si indiquem un únic valor, el navegador entendrà que fa referència a l’amplada i ajustarà l’alçada automàticament, mantenint les proporcions.

Si indiquem dos valors, el primer farà referència a l’amplada i el segon a l’alçada. La imatge es pot distorsionar

background-size: 20px 120px;