Rendre l'image d'arrière-plan pleine largeur

Question

Je voudrais avoir une image d'arrière-plan sur toute la largeur. J'ai le code CSS comme ci-dessous.

background: url(../images/img.png) 50% 50% no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%;

Mais avec cette image de code dispose d'une marge de deux côtés. J'ai fait de la marge: 0 dans l'étiquette du corps bien sûr. Merci pour votre aide!

Answer 1

Vous pouvez utiliser les css suivants.

body, html { 
     height: 100%; 
    } 

    .bg { 
     /* The image used */ 
     background-image: url(../images/img.png); 

     /* Full height */ 
     height: 100%; 

     /* Center and scale the image nicely */ 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 

Answer 2

Vous commencez l'arrière-plan avec 50% 50% qui est un peu bizarre. Alors ce que vous faites est d'utiliser background-size: cover; et assurez-vous que vous donnez no-repeat:

body {background: url("https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=") no-repeat; background-size: cover;}