Exemples des différents types de fond d'image
Fond répété (repeat)
Fond centré, non répété (no-repeat)
Fond fixe (fixed)
Fond étiré pour remplir le conteneur (stretch)
Fond qui couvre entièrement le conteneur (cover)
Fond ajusté pour être visible sans déformation (contain)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemples des différents types de fond d'image</title>
<style>
.background-fixed {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-attachment: fixed; /* Le fond reste fixe pendant le défilement */
border: 1px solid #000;
margin-bottom: 20px;
}
.background-repeat {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-repeat: repeat; /* L'image se répète horizontalement et verticalement */
border: 1px solid #000;
margin-bottom: 20px;
}
.background-no-repeat {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-repeat: no-repeat; /* L'image ne se répète pas */
background-position: center; /* Centrer l'image */
border: 1px solid #000;
margin-bottom: 20px;
}
.background-stretch {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-size: 100% 100%; /* Étire l'image pour qu'elle remplisse complètement le conteneur */
border: 1px solid #000;
margin-bottom: 20px;
}
.background-cover {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-size: cover; /* L'image couvre tout le conteneur tout en gardant ses proportions */
background-position: center; /* Centre l'image */
border: 1px solid #000;
margin-bottom: 20px;
}
.background-contain {
width: 500px;
height: 200px;
background-image: url('./snt_fond.png');
background-size: contain; /* L'image est ajustée pour être complètement visible, sans la déformer */
background-position: center; /* Centre l'image */
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Exemples des différents types de fond d'image</h1>
<h2>Fond répété (repeat)</h2>
<div class="background-repeat"></div>
<h2>Fond centré, non répété (no-repeat)</h2>
<div class="background-no-repeat"></div>
<h2>Fond fixe (fixed)</h2>
<div class="background-fixed"></div>
<h2>Fond étiré pour remplir le conteneur (stretch)</h2>
<div class="background-stretch"></div>
<h2>Fond qui couvre entièrement le conteneur (cover)</h2>
<div class="background-cover"></div>
<h2>Fond ajusté pour être visible sans déformation (contain)</h2>
<div class="background-contain"></div>
</body>
</html>