web-dev-qa-db-fra.com

Comment afficher une image de fond pleine hauteur?

J'ai une image d'arrière-plan de type photo (pas de paysage) avec une largeur de 979px sur une hauteur de 1200px. Je voudrais régler ce paramètre pour qu'il flotte à gauche et affiche 100% de la hauteur de l'image complète, sans qu'il soit nécessaire de faire défiler l'écran vers le haut ou le bas (quelle que soit la longueur du contenu).

Ceci est mon code CSS, mais il ne fonctionne pas:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
cssimagebackground
41
hangee

Vous pouvez le faire avec le code que vous avez, il vous suffit de vous assurer que html et body sont réglés sur une hauteur de 100%.

Démo: http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
74
Kevin Lynch

CSS peut le faire avec background-size: cover;

Mais pour être plus détaillé et supporter plus de navigateurs ...

Utilisez les proportions comme ceci:

 aspectRatio      = $bg.width() / $bg.height();

[~ # ~] violon [~ # ~]

6
Riskbreaker
 html, body {
    height:100%;
}

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
0
him