Background CSS
![]() | Aquest article o secció no cita les fonts o necessita més referències per a la seva verificabilitat. |
La propietat background és una de les "propietats shorthand" que defineix CSS i que s'utilitzen per a establir de forma abreujada el valor d'una o més propietats individuals.En concret, background permet establir simultàniament les cinc propietats relacionades amb el color i imatge de fons de cada element.
Gràcies a la propietat background es pot establir de forma directa el color de fons (background-color), la imatge de fons (background-image), la seva posició (background-position), si la imatge és fixa o no (background-attachment) i/o si la imatge es repeteix o no (background-repeat). Pots consultar la documentació de cada propietat individual per a accedir als seus exemples d'ús.
Background-Color
La propietat background-color estableix el color del fons d'un element.
El valor del color es pot especificar de diferent formes:
- Un nom d'un color, per exemple: "red"
- Un valor HEX, per exemple: "#ff0000"
- Un valor RGB, per exemple: "rgb(255,0,0)"
body { background-color: red; } h1 { background-color: #ff0000; } div { background-color: rgb(255,0,0); }
Background-Image
La propietat background-image estableix la imatge definida de fons d'un element.
body { background-image: url("exempre.png"); } div { background-image: url("http://www.exempre.com/exempre.png"); }
Background-Image
Aquest atribut s'usa per a especificar-li a la imatge que hem usat de fons si volem o no que es repeteixi i, en cas afirmatiu, indicar-li de quina manera volem que es repeteixi.
Si volem que la imatge es repeteixi en vertical i horitzontal utilitzarem l'atribut “repeat”, si volem que la imatge es repeteixi només en horitzontal usarem “repeat-x”. I usarem “repeat-y” perquè es repeteixi la imatge només en vertical. Si volem que no es repeteixi li ho indicarem amb “no-repeat”.
body { background-image: url("exempre.png"); background-repeat: repeat; } body { background-image: url("exempre2.png"); background-repeat: repeat-x; } body { background-image: url("exempre3.png"); background-repeat: repeat-y; } body { background-image: url("exempre4.png"); background-repeat: no-repeat; }