Mettre une couleur ou une image de fond dans une page HTML

Active 11 mai 2015    /    Viewed 2165    /    Comments 0    /    Edit


Pour mettre une couleur de fond dans une page HTML il suffit de procéder comme dans cet exemple (voir HTML Color Names pour les codes couleurs):

Couleur de fond dans une page HTML

<!DOCTYPE html>
<head>
<style style="text/css">
body {
    background-color: #cccccc;
} 
</style> 
</head>
<html>
<body>

Hello World !

</body>
</html>

Pour mettre une image en fond:

Image de fond dans une page HTML

<!DOCTYPE html>
<head>
<style style="text/css">
body {
background-image: url("MonImage.jpg");
} 
</style> 
</head>
<html>
<body>

Hello World !

</body>
</html>

Le problème ici est que l'image va se répéter ce qui ne va pas donner quelquechose de très jolie. Pour avoir une image centrée sur la page est qui s'adapte automatiquement aux dimensions de celle-ci il suffit d'ajouter les lignes suivantes:

Image responsive en background d'une page HTML

<!DOCTYPE html>
<head>
<style style="text/css">
body {
background-image: url("MonImage.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; 
background-size: cover;     
} 
</style> 
</head>
<html>
<body>
Hello World !

</body>
</html>

Recherches associées

Liens Site
CSS background-image Property w3schools
How to Create a Background Image that Scales with the Browser Window webdesign
How to make CSS background-image responsive? [duplicate] stackoverflow
CSS background-repeat Property w3schools
HTML Color Names w3schools


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!