Pour chacune de vos pages, vous pouvez définir un fond de couleur, voire une image en arrière plan.
body {
background-color : purple;
}
body {
background-image : url(../Images/FondEcran.gif);
background-repeat : no-repeat;
background-attachment : fixed;
}
background-repeat permet ou non de répéter le motif suivant que la taille de l'image est suffisante pour couvrir tout l'écran ou non.
background-attachment permet de fixer afin que le texte défile sur l'image lorsque l'internaute utilise les ascenseurs.
Dans le body, vous pouvez inclure d'autres attributs valables pour chaque page d'une manière globale :
body {
font-family : Georgia, Verdana, times;
text-align : justify;
font-size : 12pt;
margin-left : 60px;
margin-right : 50px;
}
Dans le cas d'une utilisation de plusieurs arrières-plans différents au sein d'un même site, il est préconisé de créer une feuille de style pour l'aspect général hormis l'attribut body. Ensuite seront créés autant de fichiers CSS avec l'attribut body que d'arrières-plans désirés.
Fichier_1.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/general.css">
<link rel="stylesheet" type="text/css" href="../css/fond_hiver.css">
<title>Les vacances d'hiver</title>
</head>
<body>
corps du document
</body>
</html>
Fichier_2.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/general.css">
<link rel="stylesheet" type="text/css" href="../css/fond_ete.css">
<title>Les vacances d'été</title>
</head>
<body>
corps du document
</body>
</html>
fond_hiver.css
body {
background-image : url(../Images/Grand_Bornand.jpg);
...
}
fond_ete.css
body {
background-image : url(../Images/Porquerolles.gif);
...
}