web-dev-qa-db-fra.com

CSS: étirement de l’image d’arrière-plan à 100% de la largeur et de la hauteur de l’écran?

J'ai une image appelée myImage.jpg. C'est mon CSS:

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Pour une raison quelconque, lorsque je le fais, la largeur de myImage s’étend sur l’ensemble de l’écran, mais la hauteur ne s’étend que jusqu’à la hauteur de tout le reste de la page. Donc, si je mets un tas de

<br>

dans ma page html, alors la hauteur augmentera. Si ma page HTML consiste uniquement en un

<div id='header'>
    <br>
</div>

alors la hauteur de l'image d'arrière-plan serait juste la hauteur d'un

<br>

Comment rendre la hauteur de mon image d'arrière-plan 100% de l'écran que l'utilisateur utilise pour afficher la page Web?

htmlcssbackground-image
53
user2719875

Vous devez définir la hauteur de html sur 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

107
SomeKittens

Je recommanderais 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/

52
Derek Story
html, body {
    min-height: 100%;
}

Fera le tour.

Par défaut, même le HTML et le corps n'ont que la taille du contenu qu'ils contiennent, mais jamais plus que la largeur/hauteur des fenêtres. Cela peut souvent conduire à des résultats assez étranges.

Vous voudrez peut-être aussi lire http://css-tricks.com/perfect-full-page-background-image/

Il existe d'excellents moyens d'obtenir une image d'arrière-plan complète très bonne et évolutive.

5
Kjeld Schmidt

L’unité vh peut être utilisée pour remplir l’arrière-plan de la fenêtre, c'est-à-dire la fenêtre du navigateur. (height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}
3
Mostafa Norzade