Background

A continuació explicarem les propietats de fons CSS s'utilitzen per definir els efectes de fons d'un element.
Propietats CSS utilitzats per a efectes de fons:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background ( resum de totes les propietats)

El color de fons s’estableix amb la propietat background-color Exemple:
p.a {background-color:#333333}
<p class=“a>Exemple </p> 

 

El color es pot especificar amb:

• Un codi Hexadecinal #FF0000
• Un codi RGB rgb(255,0,0)
• Un nom de color: red

La propietat background-imatge especifica una imatge per utilitzar com a fons d'un element.
Per defecte, la imatge es repeteix pel que cobreix la totalitat de l'element.

És la propietat bàsica per afegir imatges al fons.
És pot afegir a qualsevol element del document.

body {background-image: url(imatge.jpg;) 

Per repetir imatges, s’utilitza la propietat background-repeat

Pot pendre aquests valors:

• •Repeat
• •Repeat-x 
• •Repeat-y
• •No repeat
• •inherit 

Si la imatge es repeteix només horitzontalment (repeat-x), el fons es veurà millor:

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
} 

Si la volem repetir verticalment, llavors seria amb repeat-y

 

La posició de les imatges s’especifica amb background-position

Les mesures són relatives a partir de la cantonada superior esquerra

Valors que pot pendre: x%,y% xpos,ypos, left, center, right, (top, center, bottom) 

Amb background-attachement, fixem una imatge encara que fem scroll:

 

body {
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
} 

 

Finalment podem agrupar totes les propietats amb background, per escurçar el codi, especificant totes les propietats en una sola propietat. Això es diu una propietat abreujada.
La propietat abreujada per el fons no és més que el background

 

  body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Més informació w3school sobre imatges