Je suis Beggyer. Je souhaite que sur des écrans avec une largeur de 592px ou plus pour apparaître "1.png". Et sur les écrans inférieurs à 592ox pour apparaître une autre photo: "2.png".
Quel est le problème avec le code? Je ne peux pas le faire correctement.
3 Réponses :
Seul une erreur Sintax CSS,
Essayez ceci! p>
p>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("1.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media(max-width: 592px) {
.bg {
background-image: url("2.png");
}
}
</style>Je vais simplement écrire la réponse. Il y a aussi quelques autres mauvais comportements dans le code.
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("1.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 592px) {
.bg {
background-image: url("2.png");
}
}
</style>
<div class="bg"></div>
Cela devrait fonctionner bien comme ceci:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 592px) {
.bg {
background: url("1.png");
}
}
@media screen and (min-width: 592px) {
.bg {
background: url("2.png");
}
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
Pourquoi
affichage: aucun; a été défini surcorps ? qui va disparaître toutPouvez-vous élaborer un peu ce que vous voulez faire? Peut-être une capture d'écran ou quelque chose comme ça?
Où est
bg2 ?