Fins ara hem vist que podem posar un color de fons a qualsevol element HTML. Recorda que pel navegador qualsevol element s’ent\u00e9n com una caixa i dins dels seus l\u00edmits en podem modificar el fons.<\/p>\n\n\n\n
La propietat background-image<\/strong> ens permet fer servir imatges de fons. No \u00e9s incompatible amb background-color, \u00e9s a dir: un element pot tenir un color de fons i una o m\u00e9s imatges de fons.<\/p>\n\n\n\n Si un element t\u00e9 una imatge de fons i un border<\/em> visible, el border<\/em> es veur\u00e0 per sobre del fons. El color de fons sempre es veur\u00e0 per darrere les imatges de fons.<\/p>\n\n\n\n Per defecte, el valor de la propietat background-image \u00e9s \u00abnone\u00bb i de background-color \u00e9s \u00abtransparent\u00bb.<\/p>\n\n\n\n Les imatges de fons es poden especificar de dues maneres:<\/p>\n\n\n\n El valor de la propietat background-color pot contenir un o m\u00e9s enlla\u00e7os i, al mateix temps, un gradient:<\/p>\n\n\n\n Els lectors de pantalla per a persones invidents (o amb poca visi\u00f3) no donen cap informaci\u00f3 sobre les imatges de fons. Aix\u00f2 significa que no posarem com imatge de fons una imatge que sigui necess\u00e0ria sem\u00e0nticament<\/strong>.<\/p>\n\n\n\n Per defecte, la imatge de fons es repetir\u00e0 per tota la caixa de l’element, omplint tot l’espai disponible (algunes podran quedar tallades). Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 la propietat background-repeat<\/strong> t\u00e9, per defecte, el valor \u00abrepeat\u00bb. Altres valors possibles s\u00f3n:<\/p>\n\n\n\n Si et fixes, per defecte les imatges de fons es comencen a col\u00b7locar des de la part superior esquerra. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 els valors de les propietats background-position-x<\/strong> \u00e9s \u00ableft\u00bb i la de background-position-y<\/strong> \u00e9s \u00abtop\u00bb tamb\u00e9.<\/p>\n\n\n\n Les propietats background-position-x i background-position-y es poden indicar amb la propietat simplificada background-position<\/strong> (com ja hem vist amb altres propietats). <\/p>\n\n\n\n Podem fer servir les coordenades de la caixa: top right bottom left i, a m\u00e9s el valor \u00abcenter\u00bb.<\/p>\n\n\n\n Per defecte, la imatge de fons es veur\u00e0 a la mida real de la imatge (la de l’arxiu jpg, png, gif o webp). Si l’espai \u00e9s m\u00e9s petit, la imatge sortir\u00e0 de la caixa (hi haur\u00e0 una part que no es veur\u00e0). Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 el valor per defecte de la propietat background-size \u00e9s \u00abauto\u00bb.<\/p>\n\n\n\n Podem modificar les dimensions de la imatge de fons de la seg\u00fcent manera:<\/p>\n\n\n\n La imatge s’estira prou per cobrir tota la caixa<\/p>\n\n\n\n La imatge s’encongeix o estira prou per veure’s sencera<\/p>\n\n\n\n Dimensions<\/p>\n\n\n\n Podem indicar la mida de la imatge de fons \u00e9s una dimensi\u00f3 fixa (ex: 200px) o en un percentatge (ex: 20%) respecte a l’amplada de la caixa<\/p>\n\n\n\n Si indiquem un \u00fanic valor, el navegador entendr\u00e0 que fa refer\u00e8ncia a l’amplada i ajustar\u00e0 l’al\u00e7ada autom\u00e0ticament, mantenint les proporcions.<\/p>\n\n\n\n Si indiquem dos valors, el primer far\u00e0 refer\u00e8ncia a l’amplada i el segon a l’al\u00e7ada. La imatge es pot distorsionar<\/p>\n\n\n\n Fins ara hem vist que podem posar un color de fons a qualsevol element HTML. Recorda que pel navegador qualsevol element s’ent\u00e9n com una caixa i dins dels seus l\u00edmits en podem modificar el fons. La propietat background-image ens permet fer servir imatges de fons. No \u00e9s incompatible amb background-color, \u00e9s a dir: un element… Continueu llegint Background-image<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-244","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":7,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/244\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/244\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
background-image: linear-gradient(\n to bottom,\n #FF0000,\n #00FF00\n ), url(\"gatet.png\");<\/code><\/pre>\n\n\n\nRepetici\u00f3<\/h2>\n\n\n\n
\n
background-image:url(https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/smiley-png-5a3a6b01d58967.8911438215137779218747.jpg);<\/code><\/pre>\n\n\n\nbackground-repeat:no-repeat;<\/code><\/pre>\n\n\n\nbackground-repeat:repeat-x;<\/code><\/pre>\n\n\n\nbackground-repeat: repeat-y;<\/code><\/pre>\n\n\n\nbackground-repeat:space;<\/code><\/pre>\n\n\n\nbackground-size:round; <\/code><\/pre>\n\n\n\nPosici\u00f3<\/h2>\n\n\n\n
Valors possibles de background-position<\/h3>\n\n\n\n
\n
\n
\n
\n
\n
<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nbackground-position: top right 20%;<\/code><\/pre>\n\n\n\nbackground-position: left top 20px;<\/code><\/pre>\n\n\n\nMida<\/h2>\n\n\n\n
Possibles valors de background-size<\/h3>\n\n\n\n
Cover<\/h4>\n\n\n\n
background-size: cover;<\/code><\/pre>\n\n\n\nContain<\/h4>\n\n\n\n
background-size: contain;<\/code><\/pre>\n\n\n\nbackground-size: 20px 120px;<\/code><\/pre>\n\n\n\n