Comment changer la couleur du background d’une page web

Comme vu précédemment, dans le chapitre CSS sur le background, il est possible de donner n’importe quel fond à notre page html, donc une couleur ou bien un pattern (un motif qui va se répéter dans la page pour couvrir totalement le background) ou encore une image.

Nous allons récupérer le code de base de notre page HTML créé précédemment dans notre éditeur Notepad+ et lui adjoindre un style CSS pour donner une couleur à notre background (nous avons déjà vu que la feuille de style est normalement externe et est appelée par la page HTML, ici nous l’incluons pour plus de simplicité).

Utilisation du CSS pour un background en couleur

Background noir grâce aux styles CSS

Exemple HTML avec CSS intégré

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="description" content="Create an html page with an editor"/>

<title>My test page</title>

<!--Ajout d'un style CSS directement dans le fichier HTML-->
<style type="text/css">

body {background-color: #000000; color: white; text-align: center; width: 100%; 
height: 768px; }
h3 {margin-top: auto;}

</style>
</head>
<body>

<p>Sed tincidunt varius eros non sollicitudin. Integer purus ante, blandit non 
lobortis et, sollicitudin nec justo. Phasellus ornare nibh nunc, at lobortis 
justo vestibulum sit amet. Sed ornare nunc quis velit imperdiet consectetur. 
Duis tristique id nulla ac aliquet. Morbi ac pellentesque dolor. Nunc convallis 
ligula nec varius rutrum. Praesent nec nulla pretium, semper magna at, laoreet 
mi. Integerrisus turpis, bibendum sed ante nec, dapibus vulputate diam. Nam nec 
auctor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
suscipit quis erat eu ornare.</p>

</body>

</html>

Voir la démo Télécharger l’exemple