Dark Mode

Ves al contingut

Background CSS

De la Viquipedia, l'enciclopedia lliure
Aquest article o seccio no cita les fonts o necessita mes referencies per a la seva verificabilitat.

La propietat background es una de les "propietats shorthand" que defineix CSS i que s'utilitzen per a establir de forma abreujada el valor d'una o mes propietats individuals.En concret, background permet establir simultaniament les cinc propietats relacionades amb el color i imatge de fons de cada element.

Gracies a la propietat background es pot establir de forma directa el color de fons (background-color), la imatge de fons (background-image), la seva posicio (background-position), si la imatge es fixa o no (background-attachment) i/o si la imatge es repeteix o no (background-repeat). Pots consultar la documentacio de cada propietat individual per a accedir als seus exemples d'us.


Background-Color

[modifica]

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

[modifica]

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

[modifica]

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 nomes en horitzontal usarem "repeat-x". I usarem "repeat-y" perque es repeteixi la imatge nomes 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;
}