Redimensionner image d'arrière-plan dans la div à l'aide de css

Question

Ci-dessous css définit un individu en arrière-plan sur deux divs; les images se répètent eux-mêmes s'ils ne rentrent pas dans le div de taille.

Comment étirer les images à l'aide de css pour l'adapter dans l'espace requis par la div ?

<style type="text/css">   
#contentMain {  
  margin-bottom: 5%; 
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  background: url( /jQuery/mypage/img/background1.png )
}  
#page1 {    
  background: url( /jQuery/mypage/img/background2.png )  
} 
</style> 

Answer 1

Vous pouvez utiliser la propriété CSS background-size qui est disponible depuis le CSS 3:

background-size: 100% 100%;

Mise à jour

Si vous souhaitez conserver les proportions, il y a deux possibilités.

1. background-size: cover; - l'image de fond est en couvrant complètement l'élément de l'image (peut être coupé)
2. background-size: contain; - l'image est étirée sans le couper

Voici une démonstration sur jsfiddle pour tous les trois possibilitites

DÉMO

Answer 2

je vous conseille d'utiliser ce:

  background-repeat:no-repeat;
  background-image: url(your file location here);
  background-size:cover;(will only work with css3)

espérons que cela aide :D

Et si cela ne marche pas répondre à vos besoins juste dire: je peux faire un jquery pour multibrowser de soutien.

Answer 3

Avec l' arrière-plan de la taille de la propriété dans les navigateurs qui supportent cette nouvelle fonctionnalité de feuille de style CSS.