CSS: extension de l'image de fond à 100% de la largeur et de la hauteur de l'écran?
j'ai une image appelée myImage.jpg. C'est ma CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
pour une raison quelconque, quand je fais cela, la largeur de myImage s'étend sur tout l'écran mais la hauteur ne s'étend que jusqu'à la hauteur de tout le reste sur la page. Donc si je mets un paquet de
<br>
dans ma page html, alors la hauteur augmentera. Si ma page HTML se compose uniquement d'un
<div id='header'>
<br>
</div>
puis la hauteur de la image de fond serait juste la hauteur d'un
<br>
Comment puis-je faire la hauteur de mon image de fond 100% de l'écran que l'utilisateur utilise pour voir la page web?
4 réponses
vous devez régler la hauteur de html à 100%
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
je recommande background-size: cover; si vous ne voulez pas que votre arrière-plan perde ses proportions: js Fiddle
html {
background: url(image/path) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: http://css-tricks.com/perfect-full-page-background-image /
html, body {
min-height: 100%;
}
Fera l'affaire.
par défaut, même html et body sont seulement aussi grands que le contenu qu'ils contiennent, mais jamais plus que la largeur/hauteur des fenêtres. Cela peut souvent conduire à des résultats assez étranges.
vous pourriez aussi vouloir lire http://css-tricks.com/perfect-full-page-background-image /
il y a de grandes façons d'obtenir une image de fond complète très bonne et évolutive.
l'unité vh peut être utilisée pour remplir le fond du viewport, alias la fenêtre du navigateur. (height:100vh;)
html{
height:100%;
}
.body {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}