{"id":306,"date":"2019-01-23T20:34:12","date_gmt":"2019-01-23T18:34:12","guid":{"rendered":"http:\/\/tutorial.bernatcortina.cat\/?page_id=306"},"modified":"2019-01-23T20:34:12","modified_gmt":"2019-01-23T18:34:12","slug":"background","status":"publish","type":"page","link":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/","title":{"rendered":"Background"},"content":{"rendered":"<h1 style=\"text-align: justify;\">Model de caixes CSS<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-278\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\" alt=\"\" width=\"883\" height=\"831\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-279\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-76.png\" alt=\"\" width=\"737\" height=\"564\" \/><\/p>\n<h1 style=\"text-align: justify;\">Amplada total<\/h1>\n<p style=\"text-align: justify;\">L\u2019amplada i altura d\u2019un element no nom\u00e9s es calcula tenint en compte les seves propietats <strong>width <\/strong>i <strong>height<\/strong>. El marge (<strong>margin<\/strong>), emplenament o farcit (<strong>padding<\/strong>) i les vores (<strong>border<\/strong>) establerts a un element determinen l\u2019amplada i altura final de l\u2019element.<\/p>\n<p style=\"text-align: justify;\"><strong>AMPLADA TOTAL<\/strong> = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.<\/p>\n<p style=\"text-align: center;\"><em>Exemple: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-307\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.24.47.png\" alt=\"\" width=\"1346\" height=\"590\" \/>30px + 10px + 50px + 300px + 50px + 10px + 30px = <strong>480 p\u00edxels<\/strong><\/em><\/p>\n<h1 style=\"text-align: justify;\">Background<\/h1>\n<p style=\"text-align: justify;\">L\u2019\u00faltim element que forma el <strong>box model<\/strong> \u00e9s el fons (<strong>background<\/strong>) de la caixa de l\u2019element. El fons pot ser un color simple o una imatge. El fons nom\u00e9s es visualitza en l\u2019\u00e0rea ocupada pel contingut i el seu farcit (<strong>padding<\/strong>), ja que el color de les vores (<strong>border<\/strong>) es controla directament des de les vores i les zones dels marges (<strong>margin<\/strong>) sempre s\u00f3n transparents.<\/p>\n<p style=\"text-align: justify;\">Per establir un color o imatge de fons a la <strong>p\u00e0gina sencera<\/strong>, s\u2019ha d\u2019establir un fons al <strong>body<\/strong>. Si s\u2019estableix un fons a la p\u00e0gina, com que el valor inicial del fons dels elements \u00e9s transparent, tots els elements de la p\u00e0gina es visualitzaran amb el mateix fons a no ser que algun element especifiqui el seu propi fons.<\/p>\n<p style=\"text-align: justify;\">El CSS defineix cinc propietats per establir el fons de cada element: <strong>background-color, background-image, background-repeat, background-attachment, background-position<\/strong>. Tamb\u00e9 una altre propietat del tipus \u201cshorthand\u201d anomenada <strong>background<\/strong>.<\/p>\n<p style=\"text-align: justify;\">La propietat <strong>background-color<\/strong> permet mostrar un color de fons s\u00f2lid a la caixa d\u2019un element. Aquesta propietat no permet crear degradats ni cap altre efecte avan\u00e7at.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-308\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-94.png\" alt=\"\" width=\"610\" height=\"143\" \/><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-309\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-95.png\" alt=\"\" width=\"920\" height=\"675\" \/><\/p>\n<p style=\"text-align: justify;\">Per crear efectes avan\u00e7ats, \u00e9s necessari utilitzar la propietat <strong>background-image<\/strong>, que permet mostrar una imatge com a fons de la caixa en qualsevol element.<\/p>\n<p style=\"text-align: justify;\"><strong>El CSS permet establir de forma simult\u00e0nia un color i una imatge de fons<\/strong>. En aquest cas, la imatge es mostra davant el color, aix\u00f2 fa que si la imatge t\u00e9 parts transparents \u00e9s possible veure el color de fons.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-310\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-96.png\" alt=\"\" width=\"610\" height=\"100\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>\u00c9s habitual indicar un color de fons sempre que es mostra una imatge de fons<\/strong>. En el cas de qu\u00e8 no es pugui mostrar la imatge o aquesta contingui errors, el navegador mostrar\u00e0 el color indicat (que es recomana que sigui, dins el possible, el m\u00e9s similar a la imatge) i aix\u00ed no semblar\u00e0 que la p\u00e0gina contingui errors.<\/p>\n<p style=\"text-align: justify;\">Si la imatge que es vol mostrar <strong>\u00e9s massa gran<\/strong> pels fons de l\u2019element, nom\u00e9s es mostra la part de la imatge compresa per l\u2019element.<\/p>\n<p style=\"text-align: justify;\">Si la imatge <strong>\u00e9s m\u00e9s petita<\/strong> que l\u2019element, el CSS la repeteix horitzontal i vertical fins a omplir tot el fons de l\u2019element.<\/p>\n<p style=\"text-align: justify;\">Aquest comportament \u00e9s \u00fatil per establir un fons complex a una p\u00e0gina web sencera.<\/p>\n<p style=\"text-align: justify;\"><em>Imatge original: <\/em><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-311\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-97.png\" alt=\"\" width=\"124\" height=\"127\" \/><\/p>\n<p style=\"text-align: justify;\"><em>Resultat: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-312\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-98.png\" alt=\"\" width=\"847\" height=\"762\" \/><\/em><\/p>\n<p style=\"text-align: justify;\"><strong>Amb una imatge petita, s\u2019aconsegueix cobrir completament el fons de la p\u00e0gina.<\/strong><\/p>\n<p style=\"text-align: justify;\">A vegades per\u00f2, no volem que la imatge de fons es vagi repetint. Per aix\u00f2, el CSS introdueix la propietat <strong>background-repeat <\/strong>que permet controlar la forma de repetici\u00f3 de les imatges de fons.<\/p>\n<p style=\"text-align: justify;\">El valor <strong>repeat<\/strong> indica que la imatge s\u2019ha de repetir <strong>en totes les direccions<\/strong>, \u00e9s el comportament per defecte.<\/p>\n<p style=\"text-align: justify;\">El valor <strong>no-repeat <\/strong>mostra nom\u00e9s una vegada la imatge i <strong>no es repeteix<\/strong> en cap direcci\u00f3.<\/p>\n<p style=\"text-align: justify;\">El valor <strong>repeat-x<\/strong> repeteix la imatge <strong>nom\u00e9s horitzontalment<\/strong>.<\/p>\n<p style=\"text-align: justify;\">El valor <strong>repeat-y<\/strong> repeteix la imatge <strong>nom\u00e9s de forma vertical<\/strong>.<\/p>\n<p style=\"text-align: justify;\"><em>Exemple: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-313\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-99.png\" alt=\"\" width=\"762\" height=\"170\" srcset=\"https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-99.png 762w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-99-300x67.png 300w\" sizes=\"auto, (max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><br \/>\n<\/em><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-314\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-100.png\" alt=\"\" width=\"920\" height=\"650\" \/><\/p>\n<p style=\"text-align: justify;\"><em>Exemple: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-315\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-101.png\" alt=\"\" width=\"766\" height=\"183\" \/><br \/>\n<\/em><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-316\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-102.png\" alt=\"\" width=\"920\" height=\"664\" \/><\/p>\n<p style=\"text-align: justify;\">A m\u00e9s a m\u00e9s de seleccionar el tipus de repetici\u00f3 de les imatges de fons, el CSS permet controlar la <strong>posici\u00f3<\/strong> de la imatge dins dels fons de l\u2019element mitjan\u00e7ant la propietat <strong>background-position<\/strong>.<\/p>\n<p style=\"text-align: justify;\">La propietat <strong>background-position<\/strong> permet indicar la dist\u00e0ncia que es despla\u00e7a la imatge del fons respecte de la seva <strong>posici\u00f3 original situada a la cantonada superior esquerra<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Si s\u2019indiquen <strong>dos<\/strong> percentatges o dues mesures, el primer indica el despla\u00e7ament <strong>horitzontal<\/strong> i el segon el despla\u00e7ament <strong>vertical<\/strong> respecte del origen (cantonada superior esquerra).<\/p>\n<p style=\"text-align: justify;\">Si nom\u00e9s s\u2019indica <strong>un<\/strong> percentatge o una mesura, es considera que \u00e9s el despla\u00e7ament <strong>horitzontal<\/strong>, i al despla\u00e7ament vertical se li assigna autom\u00e0ticament el valor de 50%.<\/p>\n<p style=\"text-align: justify;\">Quant s\u2019utilitzen percentatges, la seva interpretaci\u00f3 no \u00e9s intu\u00eftiva. Si el valor de la propietat <strong>background-position<\/strong> s\u2019indica mitjan\u00e7ant dos percentatges x% y%, el navegador col\u00b7loca el punt (x%, y% que acabem de definir) en el punt x%, y% de l\u2019element.<\/p>\n<p style=\"text-align: justify;\">Les paraules clau permeses s\u00f3n equivalents a alguns percentatges: <strong>top=0%, left=0%, center=50%, bottom=100%, right=100%. <\/strong>Tamb\u00e9 es pot barrejar percentatges i paraules clau, <em>per exemple<\/em>: <strong><em>50% 2px, center 6px, center 10%.<\/em><\/strong><\/p>\n<p style=\"text-align: justify;\">Si s\u2019utilitzen nom\u00e9s paraules clau, l\u2019ordre \u00e9s indiferent i per tant, \u00e9s equivalent indicar <strong>top left<\/strong> que <strong>left top<\/strong>.<\/p>\n<p style=\"text-align: justify;\"><em>Exemples:<br \/>\n<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-319\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.19.png\" alt=\"\" width=\"1384\" height=\"424\" srcset=\"https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.19.png 1384w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.19-300x92.png 300w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.19-768x235.png 768w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.19-1024x314.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-320\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.31.png\" alt=\"\" width=\"1366\" height=\"406\" srcset=\"https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.31.png 1366w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.31-300x89.png 300w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.31-768x228.png 768w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.31-1024x304.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-321\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.40.png\" alt=\"\" width=\"1372\" height=\"404\" srcset=\"https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.40.png 1372w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.40-300x88.png 300w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.40-768x226.png 768w, https:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-23-a-les-19.32.40-1024x302.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p style=\"text-align: justify;\">Tamb\u00e9 podem indicar que el fons es <strong>mantingui fix quan la finestra del navegador es despla\u00e7a<\/strong> fent scroll. La propietat que controla aquest comportament \u00e9s <strong>background-attachment<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Per fer que una imatge de fons es mostri fixa al despla\u00e7ar la finestra del navegador, s\u2019ha d\u2019afegir la propietat <strong>background-attachment: fixed<\/strong>.<\/p>\n<p style=\"text-align: justify;\">El CSS defineix tamb\u00e9 una propietat \u201cshorthand\u201d per indicar totes les propietats dels colors i imatges de fons de forma directa. La propietat s\u2019anomena <strong>background<\/strong> i \u00e9s la que generalment s\u2019utilitza per establir les propietats de fons dels elements.<\/p>\n<p style=\"text-align: justify;\">L\u2019ordre en el qu\u00e8 s\u2019indiquen les propietats \u00e9s indiferent, encara que en general es segueix el patr\u00f3: <strong>color, url, repetici\u00f3 i posici\u00f3<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Model de caixes CSS Amplada total L\u2019amplada i altura d\u2019un element no nom\u00e9s es calcula tenint en compte les seves propietats width i height. El marge (margin), emplenament o farcit (padding) i les vores (border) establerts a un element determinen l\u2019amplada i altura final de l\u2019element. AMPLADA TOTAL = margin-left + border-left + padding-left + &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abBackground\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":223,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-306","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Background | HTML &amp; CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background | HTML &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"Model de caixes CSS Amplada total L\u2019amplada i altura d\u2019un element no nom\u00e9s es calcula tenint en compte les seves propietats width i height. El marge (margin), emplenament o farcit (padding) i les vores (border) establerts a un element determinen l\u2019amplada i altura final de l\u2019element. AMPLADA TOTAL = margin-left + border-left + padding-left + &hellip; Continua llegint \u00abBackground\u00bb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bernatcortina\" \/>\n<meta property=\"og:image\" content=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bernatcortina\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\",\"name\":\"Background | HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\",\"datePublished\":\"2019-01-23T18:34:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage\",\"url\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\",\"contentUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Protegit: CSS\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Background\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Fonaments d&#039;HTML i full d&#039;estils\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background | HTML &amp; CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/","og_locale":"ca_ES","og_type":"article","og_title":"Background | HTML &amp; CSS","og_description":"Model de caixes CSS Amplada total L\u2019amplada i altura d\u2019un element no nom\u00e9s es calcula tenint en compte les seves propietats width i height. El marge (margin), emplenament o farcit (padding) i les vores (border) establerts a un element determinen l\u2019amplada i altura final de l\u2019element. AMPLADA TOTAL = margin-left + border-left + padding-left + &hellip; Continua llegint \u00abBackground\u00bb","og_url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/","og_site_name":"HTML &amp; CSS","article_publisher":"https:\/\/www.facebook.com\/bernatcortina","og_image":[{"url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@bernatcortina","twitter_misc":{"Temps estimat de lectura":"5 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/","url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/","name":"Background | HTML &amp; CSS","isPartOf":{"@id":"https:\/\/tutorial.bernatcortina.cat\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage"},"image":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage"},"thumbnailUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png","datePublished":"2019-01-23T18:34:12+00:00","breadcrumb":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#primaryimage","url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png","contentUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-75.png"},{"@type":"BreadcrumbList","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tutorial.bernatcortina.cat\/"},{"@type":"ListItem","position":2,"name":"Protegit: CSS","item":"https:\/\/tutorial.bernatcortina.cat\/index.php\/css\/"},{"@type":"ListItem","position":3,"name":"Background"}]},{"@type":"WebSite","@id":"https:\/\/tutorial.bernatcortina.cat\/#website","url":"https:\/\/tutorial.bernatcortina.cat\/","name":"HTML &amp; CSS","description":"Fonaments d&#039;HTML i full d&#039;estils","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/comments?post=306"}],"version-history":[{"count":0,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/306\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/223"}],"wp:attachment":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/media?parent=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}