Créer son site Web

livre création de site Internet-Bon de commande

Background : meta propriete CSS
Sous proprietes : image - color - repeat - attachment - position

Formation site internet>compléments du livre>Exemples de code XHTML et CSS>meta propriété background>

Background, meta-propriété CSS, est présentée ici avec toutes ses sous-propriétés (background-color, backgroung-image, background-repeat, background-attachment, backgroung-position) et les valeurs possibles pour chacun d'elles.

Création site Web Formation site Web Livre site Web

Background : meta propriété CSS

Lignes CSS background pour la syntaxe raccourcie

body
{
background:rgb(51,83,122) url("image/test.jpg") no-repeat fixed left top;
}

Lignes CSS background pour la syntaxe développée

body
{
background-color:rgb(51,83,122);
background-image:url("image/test.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
}

Background-color

body
{
background-color:rgb(51,83,122);
}

Background-image

body
{
background-image:url("image/test.jpg");
}

Background-repeat

body
{
background-repeat:no-repeat;
}

Background-attachment

body
{
background-attachment:fixed;
}

Background-position

body
{
background-position:left top;
}

Exemples d'utilisation

Image d'un dégradé centré (page 143)

Pour obtenir le meilleur résultat avec un dégradé centré :

balise backgroung pour un dégradé centré

Vous utiliserez les lignes CSS suivantes :

/*dégradé centré page 143*/
body
{
background-color:rgb(48,76,115);
background-image:url("image/degarde-centre.jpg");
background-repeat:no-repeat;
background-position:center top;
}

Image d'un dégradé vertical (page 144)

Pour obtenir le meilleur résultat avec un dégradé vertical:

balise backgroung pour un dégradé vertical

Vous utiliserez les lignes CSS suivantes :

/*dégradé vertical page 144*/
body
{
background-color:rgb(48,76,115);
background-image:url("image/degrade-vertical.jpg");
background-repeat:repeat-x;
background-position:left top;
}

Image d'un dégradé horizontal (page 145)

Pour obtenir le meilleur résultat avec un dégradé horizontal :

balise backgroung pour un dégradé horizontal

Vous utiliserez les lignes CSS suivantes :

/*dégradé horizontal page 145*/
body
{
background-color:rgb(80,130,190);
background-image:url("image/degrade-horizontal.jpg");
background-repeat:repeat-y;
background-position:left top;
}

Image d'un dégradé oblique (page 146)

Pour obtenir le meilleur résultat avec un dégradé oblique :

balise backgroung pour un dégradé oblique

Vous utiliserez les lignes CSS suivantes :

/*dégradé oblique page 146*/
body
{
background-color:rgb(51,83,122);
background-image:url("image/degrade-oblique.jpg");
background-repeat:no-repeat;
background-position:left top;
}

Les autres propriétés CSS

Autres exemples de code CSS à copier-coller :

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire Outils pédagogiques Formation site Web Mentions légales Contact