Question Étirer et mettre à l'échelle le fond CSS


Existe-t-il un moyen d'obtenir un arrière-plan en CSS pour s'étirer ou évoluer pour remplir son conteneur?


607
2017-12-17 22:21


origine


Réponses:


Pour les navigateurs modernes, vous pouvez accomplir cela en utilisant background-size:

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

cover signifie étirer l'image soit verticalement ou horizontalement de sorte qu'il ne colle / répète jamais.

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

Pour qu'il 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')";

213
2017-12-21 02:11



Utilisez le CSS 3 propriété background-size:

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

Ceci est disponible pour les navigateurs modernes, depuis 2012.


556
2018-01-26 11:02



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, cependant.

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!

Afin de redimensionner l'image pour qu'elle soit "à fond perdu" et conserver le rapport d'aspect, vous pouvez le faire à la place:

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

Cela fonctionne très bien! Toutefois, si une dimension est recadrée, elle sera recadrée sur un seul côté de l'image, plutôt que d'être recadrée uniformément des deux côtés (et centrée). Je l'ai testé dans Firefox, Webkitet Internet Explorer 8.


171
2017-12-23 13:01



Utilisez le attribut de taille de fond  en CSS3:

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

MODIFIER:  Modernizr les soutiens détection du support de taille de fond. Vous pouvez utiliser une solution de contournement JavaScript écrite pour fonctionner comme vous en avez besoin et la charger dynamiquement lorsqu'il n'y a pas de support. Cela permettra de maintenir le code maintenable sans avoir recours à des intrusifs CSS hacks pour certains navigateurs.

Personnellement, j'utilise un script pour le traiter en utilisant jQuery, c'est une adaptation de imgsizer. Comme la plupart des conceptions utilisent maintenant des% de largeur pour les mises en page 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 de 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;
}

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


161
2017-07-29 10:55



Essayez l'article taille de fond. 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%;
} 

32
2017-11-02 11:25



Pas actuellement. Il sera disponible en CSS 3, mais cela prendra du temps avant qu'il ne soit implémenté dans la plupart des navigateurs.


16
2017-12-17 22:27



.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+ (Opera 9.5 supporté en taille de fond mais pas les mots-clés)
  • Firefox 3.6+ (Firefox 4 prend en charge la version préfixée non 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 accordé à cet article par Chris Coyier http://css-tricks.com/perfect-full-page-background-image/


15
2018-05-13 15:06



Définir "étirer et mettre à l'é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 un graphique d'un seul 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é traverse la page, il sera d'un pixel de haut et plus large que votre conteneur et répété sur la page.

Normalement, pour donner l'illusion que le conteneur se remplit lorsque le conteneur se développe ou se rétracte, vous agrandissez l'image. Tout chevauchement ne serait pas affiché en dehors des limites du conteneur.

Si vous voulez un effet qui repose sur quelque chose comme une boîte avec des bords incurvés, alors vous collez le côté gauche de votre boîte sur le côté gauche de votre conteneur avec un chevauchement suffisant (dans la raison), quelle que soit la taille du conteneur, jamais Il n'y a plus d'arrière-plan et vous superposez une image du côté droit de la boîte avec des bords courbes et placez-la sur la droite du conteneur. Ainsi, à mesure que le contenant rétrécit ou se développe, l'effet de boîte incurvée semble rétrécir ou croître avec lui - ce qui n'est pas le cas, mais cela donne l'illusion que c'est ce qui se passe.

En ce qui concerne le rétrécissement et la croissance de l'image avec le conteneur, vous devez utiliser des astuces de superposition pour faire apparaître l'image comme arrière-plan et javascript pour la redimensionner avec le conteneur. Il n'y a pas de façon actuelle de le faire avec CSS ...

Si vous utilisez des graphiques vectoriels, vous avez bien peur d'être en dehors de mon domaine d'expertise.


5
2017-12-17 22:28



En un mot: non. La seule façon d'étirer une image est avec le <img> marque. Vous devrez être créatif.

Cela était vrai en 2008, quand la réponse a été écrite. Aujourd'hui, les navigateurs modernes prennent en charge background-size ce qui résout ce problème. Méfiez-vous que IE8 ne le supporte pas.


5
2017-12-17 22:25



C'est ce que j'en ai fait. Dans la classe stretch, j'ai simplement changé la hauteur pour auto. De cette façon, votre image de fond 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;
}

4
2017-11-17 19:59



Ajouter un background-attachment ligne:

#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
2018-05-13 12:52