web-dev-qa-db-fra.com

Image d'arrière-plan CSS - rétrécir pour s'adapter à la taille fixe div

J'ai le code suivant à https://jsfiddle.net/ncrcfduz , et une image d'arrière-plan à https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg . J'ai besoin de redimensionner l'image d'arrière-plan pour l'adapter à la div, de préférence pour afficher la plupart du contenu "centré" de l'image. Le code suivant affiche uniquement le coin supérieur gauche de l'image.

.container {
  background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 150px;
  width: 300px;
}
<div class="container">
</div>
csscss3backgroundbackground-image
12
user1187968

Vous cherchez background-size: contain ( voir l'entrée MDN ), pas cover. Pour que votre exemple fonctionne, vous devez supprimer le background-attachment: fixed. Utilisation background-position: center pour centrer l'arrière-plan dans votre div.

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 150px;
    width: 300px;
}
<div class="container">
</div>

Remarques:

  • De nos jours, vous n'avez presque certainement pas besoin des préfixes du navigateur, ce qui signifie que vous pouvez simplement utiliser background-size: contain. Voir https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility

  • Si vous utilisez Autoprefixer (inclus dans de nombreux outils de construction et configurations de construction), il ajoutera automatiquement toutes les versions préfixées nécessaires pour vous, ce qui signifie que vous pourriez faire background-size: contain même si les versions actuelles des principaux navigateurs nécessitaient toujours des préfixes.

  • Vous pouvez inclure la taille dans la propriété raccourcie background avec la syntaxe background: <background-position>/<background-size>. Cela ressemblerait à

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;

    height: 150px;
    width: 300px;
}
31
henry

tu devrais utiliser:

.container{
    background-size: 100%;
}
2
Anonoymous

Il vous suffit de remplacer "fixe" par "centre" sur votre instruction "d'arrière-plan".

Comme ça:

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;

JSFiddle ici: https://jsfiddle.net/ncrcfduz/2/

1
AymericM