Étirer et redimensionner le fond CSS

Y a-t-il un moyen d’obtenir un arrière-plan en CSS à étirer ou à mettre à l’échelle pour remplir son conteneur?

Pour les navigateurs modernes, vous pouvez le faire en utilisant la background-size :

 body { background-image: url(bg.jpg); background-size: cover; } 

cover signifie étirer l’image soit verticalement soit horizontalement pour qu’elle ne se répète jamais.

Cela fonctionnerait pour Safari 3 (ou version ultérieure), Chrome, Opera 10+, Firefox 3.6+ et Internet Explorer 9 (ou version ultérieure).

Pour qu’il fonctionne avec des versions inférieures d’Internet Explorer, essayez ces CSS:

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 

Utilisez la propriété d’ background-size propriété CSS 3 :

 #my_container { background-size: 100% auto; /* width and height, can be %, px or whatever. */ } 

Ceci est disponible pour les navigateurs modernes, depuis 2012.

La mise à l’échelle d’une image avec CSS n’est pas tout à fait possible, mais un effet similaire peut être obtenu de la manière suivante.

Utilisez ce balisage:

 

avec le CSS suivant:

 #background { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; } .stretch { width:100%; height:100%; } 

et vous devriez avoir fini!

Pour redimensionner l’image afin qu’elle soit “à fond perdu” et conserver les proportions, vous pouvez le faire à la place:

 .stretch { min-width:100%; min-height:100%; width:auto; height:auto; } 

Ca marche plutôt bien! Si une dimension est recadrée, elle ne sera recadrée que d’un côté de l’image, au lieu d’être recadrée de manière uniforme (et centrée). Je l’ai testé dans Firefox, Webkit et Internet Explorer 8.

Utilisez l’ atsortingbut background-size dans CSS3:

 .class { background-image: url(bg.gif); background-size: 100%; } 

EDIT: Modernizr prend en charge la détection du support de taille d’arrière-plan . Vous pouvez utiliser une solution de contournement JavaScript écrite pour fonctionner comme vous en avez besoin et la charger dynamicment en l’absence de support. Cela maintiendra le code maintenable sans avoir recours à des hacks CSS intrusifs pour certains navigateurs.

Personnellement, j’utilise un script pour y faire face avec jQuery, c’est une adaptation de imgsizer . Comme la plupart des designs que j’utilise maintenant utilisent des largeur% pour les dispositions fluides sur les appareils, il y a une légère adaptation à l’une des boucles (en tenant compte des tailles qui ne sont pas toujours à 100%):

 for (var i = 0; i < images.length; i++) { var image = images[i], width = String(image.currentStyle.width); if (width.indexOf('%') == -1) { continue; } image.origWidth = image.offsetWidth; image.origHeight = image.offsetHeight; imgCache.push(image); c.ieAlpha(image); image.style.width = width; } 

EDIT: Vous pouvez également être intéressé par jQuery CSS3 Finaliz [s] e .

Essayez la taille d’arrière-plan de l’article. Si vous utilisez tout ce qui suit, cela fonctionnera dans la plupart des navigateurs sauf Internet Explorer.

 .foo { background-image: url(bg-image.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } 

Pas actuellement. Il sera disponible en CSS 3 , mais il faudra du temps pour qu’il soit implémenté dans la plupart des navigateurs.

 .style1 { 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; } 

Travaille dans:

  • Safari 3+
  • Chrome quelque +
  • IE 9+
  • Opera 10+ (Opera 9.5 prend en charge la taille d’arrière-plan mais pas les mots-clés)
  • Firefox 3.6+ (Firefox 4 prend en charge la version non préfixée par un fournisseur)

En outre, vous pouvez essayer ceci pour une solution ie

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; zoom:1; 

Crédit à cet article de Chris Coyier http://css-sortingcks.com/perfect-full-page-background-image/

Définir “étirement et échelle” …

Si vous avez un format bitmap, ce n’est généralement pas génial (graphiquement parlant) de l’étirer et de le tirer. Vous pouvez utiliser des motifs reproductibles pour donner l’illusion du même effet. Par exemple, si vous avez un dégradé plus clair vers le bas de la page, vous utiliserez alors un graphique d’une largeur de 1 pixel et de la même hauteur que votre conteneur (ou de préférence plus grand pour tenir compte de la mise à l’échelle). page. De même, si le dégradé traversait la page, sa hauteur serait supérieure à celle de votre conteneur et répétée sur la page.

Normalement, pour donner l’illusion qu’il s’étend pour remplir le conteneur lorsque le conteneur se développe ou se rétrécit, vous agrandissez l’image par rapport au conteneur. Tout chevauchement ne serait pas affiché en dehors des limites du conteneur.

Si vous voulez un effet qui s’appuie sur quelque chose comme une boîte à bords courbés, vous collerez le côté gauche de votre boîte sur le côté gauche de votre contenant avec suffisamment de chevauchement (dans les limites du raisonnable), quelle que soit la taille du conteneur, jamais vous ne dépassez pas l’arrière-plan et vous superposez une image du côté droit de la boîte avec des bords incurvés et placez-la à droite du conteneur. Ainsi, au fur et à mesure que le contenant rétrécit ou grandit, l’effet de boîte incurvée semble se rétrécir ou s’agrandir – ce n’est pas le cas, mais cela donne l’illusion que c’est ce qui se passe.

En ce qui concerne la création et la croissance de l’image avec le conteneur, vous devez utiliser des astuces de superposition pour que l’image semble fonctionner comme arrière-plan et du javascript pour le redimensionner avec le conteneur. Il n’y a pas de moyen actuel de le faire avec CSS …

Si vous utilisez des graphiques vectoriels, vous êtes bien en dehors de mon domaine d’expertise.

En un mot: non. La seule façon d’étirer une image est d’ . Vous devrez être créatif.

C’était vrai en 2008, quand la réponse a été écrite. Aujourd’hui, les navigateurs modernes prennent en charge la background-size ce qui résout ce problème. Attention, IE8 ne le supporte pas.

C’est ce que j’en ai fait. Dans la classe d’étirement, j’ai simplement changé la hauteur en auto . De cette façon, votre image d’arrière-plan a toujours la même taille que la largeur de l’écran et la hauteur aura toujours la bonne taille.

 #background { width: 100%; height: 100%; position: absolute; margin-left: 0px; margin-top: 0px; z-index: 0; } .stretch { width:100%; height:auto; } 

Ajoutez une ligne d’ background-attachment :

 #background { background-attachment:fixed; width: 100%; height: 100%; position: absolute; margin-left: 0px; margin-top: 0px; z-index: 0; } .stretch { width:100%; height:auto; } 

J’aimerais souligner que cela équivaut à faire:

 html { width: 100%; height: 100%; } body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */} 

Une autre excellente solution pour cela est le Backstretch de Srobbin qui peut être appliqué au corps ou à n’importe quel élément de la page – http://srobbin.com/jquery-plugins/backstretch/

Essaye ça

http://jsfiddle.net/5LZ55/4/

 body { background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } 

Un astuce supplémentaire pour la fraude de SolidSmile est de mettre à l’échelle (le redimensionnement proportionné) en définissant une largeur et en utilisant auto pour la hauteur.

Ex:

 #background { width: 500px; height: auto; position: absolute; left: 0px; top: 0px; z-index: 0; } 

Utilisez la propriété border-image : yourimage pour définir votre image et la mettre à l’échelle sur toute la bordure de votre écran ou de votre fenêtre.