web-dev-qa-db-fra.com

CSS: 100% de largeur et d'arrière-plan?

Dans ma page ont 2-3 sections qui ont 100% de largeur et d'arrière-plan. Lorsque je l'ouvre en plein écran, tout va bien, mais lorsque l'écran est plus petit que 960 px (largeur du contenu dans ces sections), l'image d'arrière-plan n'est pas la page entière. Le côté droit est caché au premier moment sans arrière-plan - il est blanc. Vous pouvez voir ce que je veux dire ici: http://micobg.net/10th/

cssbackgroundwidth
12
micobg

Ajoutez simplement le background-size:100% style à l'élément où vous avez appliqué background-image. Fonctionne dans Firefox, Safari et Opera. Par exemple:

<style>
.divWithBgImage {
  width: 100%;
  height: 600px;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-size: 100%; //propotional resize
/*
  background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
  some contents
</div>
23
Jay

En ce qui concerne l'article this , vous devez également utiliser cover:

html { 
  background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
5
Mazdak Shojaie

Utiliser l'arrière-plan min-largeur: 960px; au lieu de la largeur: 100%; À votre santé

2
Simon Dragsbæk