Background CSS

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;
}