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

J’ai une image appelée myImage.jpg. Ceci est mon CSS:

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

Pour une raison quelconque, lorsque 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 rest de la page. Donc si je mets un tas de

Dans ma page HTML, la hauteur augmentera. Si ma page HTML se compose uniquement d’un

alors la hauteur de l’image de fond serait juste la hauteur d’un

Comment faire pour que la hauteur de mon image d’arrière-plan soit égale à 100% de celle utilisée par l’utilisateur pour afficher la page Web?

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

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

http://jsfiddle.net/8XUjP/

Je recommanderais la 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-sortingcks.com/perfect-full-page-background-image/

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

Fera le tour

Par défaut, même le HTML et le corps ne sont plus aussi gros 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 également vouloir lire http://css-sortingcks.com/perfect-full-page-background-image/

Il existe d’excellentes méthodes pour obtenir une image d’arrière-plan complète très bonne et évolutive.

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

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