Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Image de l'arrière-plan redimensionnée et sensible</title>
<style>
/* Pour largeur inférieure à 400px: */
body {
background-repeat: no-repeat;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
}
/* Pour largeur 400px et plus: */
@media only screen and (min-width: 400px) {
body {
background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
}
}
</style>
</head>
<body>
<p style="margin-top: 220px;">
Redimensionnez la largeur du navigateur et l'image de l'arrière-plan va changer à 400px. Pour voir l'effet plus clairement, basculez la barre d'outils de l'appareil et ayez une vue mobile.
</p>
</body>
</html>