web-dev-qa-db-fra.com

Étirer et redimensionner l'arrière-plan CSS

Existe-t-il un moyen d’obtenir une formation en CSS à étirer ou à redimensionner pour remplir son conteneur?

htmlcss
640
Lawrence Dol

Pour les navigateurs modernes, vous pouvez y parvenir en utilisant background-size :

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

cover signifie que l'image est étirée verticalement ou horizontalement, de sorte qu'elle ne se répète jamais en mosaïque.

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

Pour que cela fonctionne avec les 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')";
_
255
Clement

Utilisez la propriété CSSbackground-size:

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

Ceci est disponible pour les navigateurs modernes, depuis 2012.

566
vinyll

Redimensionner 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:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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 être fait!

Pour redimensionner l’image et conserver le rapport de format, vous pouvez le faire à la place:

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

Cela fonctionne assez bien! Si une dimension est rognée, elle sera rognée sur un seul côté de l'image au lieu d'être rognée de manière uniforme sur les deux côtés (et au centre). Je l'ai testé dans Firefox, Webkit et Internet Explorer 8.

172
SolidSmile

Utilisez le attribut background-size en CSS3:

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

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

Personnellement, j’utilise un script pour le gérer avec jQuery, c’est une adaptation de imgsizer . Comme la plupart des conceptions que j'utilise à présent en largeur% pour les présentations fluides sur plusieurs appareils, une légère adaptation à l'une des boucles est proposée (les tailles ne représentant 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 pourriez également être intéressé par jQuery CSS3 Finaliz [s] e .

161
Metalshark

Essayez l'article background-size. Si vous utilisez tous les éléments suivants, 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%;
}
34
alekwisnia
.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 Peu importe +
  • IE 9+
  • Opera 10+ (taille de fond prise en charge par Opera 9.5 mais pas les mots-clés)
  • Firefox 3.6+ (Firefox 4 prend en charge la version à préfixe non-fournisseur)

En plus, 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 par Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

15
Blowsie

Pas actuellement. Il sera disponible dans CSS , mais il faudra un certain temps pour qu'il soit mis en œuvre dans la plupart des navigateurs.

15
Eran Galperin

En un mot: non. Le seul moyen d'étirer une image consiste à utiliser la balise <img>. Vous devrez être créatif.

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

8
Vilx-

Définir "étirement et échelle" ...

Si vous avez un format bitmap, il n’est généralement pas formidable (graphiquement parlant) de l’étirer et de le tirer. Vous pouvez utiliser des motifs répétables pour donner l’illusion du même effet. Par exemple, si vous avez un dégradé plus clair vers le bas de la page, utilisez un graphique large d'un 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), puis insérez-le en mosaïque. page. De même, si le dégradé traversait la page, il aurait une hauteur d'un pixel et serait plus large que votre conteneur, puis répété sur la page.

Normalement, pour donner l’illusion de s’étirer pour remplir le conteneur lorsque le conteneur grossit ou diminue, 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 aux bords incurvés, vous devez coller le côté gauche de votre boîte sur le côté gauche de votre conteneur avec suffisamment de chevauchement pour que (dans des limites raisonnables), quelle que soit la taille du conteneur, manque d’arrière-plan, puis vous superposez une image du bord droit de la boîte avec des bords incurvés et vous la positionnez à droite du conteneur. Ainsi, à mesure que le conteneur se contracte ou se développe, l’effet de boîte incurvée semble se contracter ou s’accroître, ce n’est pas le cas, mais il donne l’illusion que c’est ce qui se passe.

En ce qui concerne la réduction et la croissance de l'image avec le conteneur, vous devez utiliser des astuces de superposition pour que l'image apparaisse comme arrière-plan et du javascript pour la redimensionner avec le conteneur. Il n'y a actuellement aucun moyen de faire cela avec CSS ...

Si vous utilisez des graphiques vectoriels, vous avez bien peur de sortir de mon domaine d'expertise.

5
BenAlabaster

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 a 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;
}
4
Edward

Je tiens à souligner que cela revient à faire:

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

Ajoutez une ligne 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;
}
2
user340273

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;
}
2
user3383708

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

2
nickff

Une astuce supplémentaire pour la triche de SolidSmile consiste à mettre à l'échelle (le redimensionnement proportionnel) 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;
}
1
actionscription

Utilisez la propriété border-image : yourimage pour définir votre image et la redimensionner jusqu'à l'intégralité du bord de votre écran ou de votre fenêtre.

0
Natesh bhat