L'image de fond ne couvre pas le plein écran

Question

Je suis en train de créer un site Web de type déroulant d'une page, où chaque diapositive est une page. Dans la dernière diapositive, l'image d'arrière-plan est en quelque sorte coupée et il y a juste un espace blanc. Le code CSS utilisé sur l'id de cette diapositive:

#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; } 

Voici une impression: http://postimg.org/image/489mxfagt/

Toute solution?

Answer 1

Vous pouvez utiliser la propriété échelle de fond:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Answer 2

Si vous soutenez les navigateurs modernes, vous pouvez faire ce qui suit.

#seven { 
    background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */ 
} 

Vous pouvez mettre votre image dans une balise img dans un conteneur, placez le récipient en utilisant soit fixed ou absolute positionnement. Ensuite, donnez-lui une largeur de 100% et une hauteur de 100% ou top, left, right, bottom une valeur de 0, tout en masquant le débordement. Enfin, définissez la largeur img sur width: auto et height: 100% avec display: block. .

Answer 3

en utilisant l'image de fond css

html { 
     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; 
    } 

que vous pouvez essayer une autre façon ci-dessous le code fonctionne très bien IE7

code css

#bg { 
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
} 

#bg img { 
position:absolute; 
top:25%;left:25%; 
right:25%;bottom:25%; 
margin:auto; 
min-width:50%; 
min-height:50%;} 

code html

<div id="bg"> 
    <img src="images/Body-bg.png" alt=""> 
</div> 

Answer 4

Ajoutez simplement .bgwidth {width: 100%; } .bgheight {hauteur: 100%; }

cela éliminera question