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

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

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 verticalement ou 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 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')";

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

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

Il 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, 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 avoir terminé!

Afin de redimensionner l'image pour qu'elle soit "à fond perdu" et de maintenir 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! Si une dimension est rognée, cependant, elle sera rognée sur un seul côté de l'image, plutôt que d'être rognée uniformément des deux côtés (et centrée). Je l'ai testé dans Firefox, Webkit et Internet Explorer 8.

Utilisez l' attribut background-size dans CSS3:

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

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

Personnellement, j'utilise un script pour y faire face en utilisant jQuery, c'est une adaptation de imgsizer . Comme la plupart des conceptions que j'utilise maintenant la largeur% pour les dispositions fluides sur les appareils, il y a une légère adaptation à l'une des boucles (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 tous les éléments suivants, cela fonctionnera dans la plupart des navigateurs, à l'exception d'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 avant qu'il ne 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 peu importe +
• 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 préfixée non-fournisseur)

De 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 de Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

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

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

Définissez "é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 déplacer. Vous pouvez utiliser des motifs répétables pour donner l'illusion du même effet. Par exemple, si vous avez un dégradé qui s'éclaircit vers le bas de la page, vous utiliserez un graphique d'un seul pixel de large 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 le tuiler à travers le page. De même, si le dégradé traversait la page, il serait d'un pixel de haut et plus large que votre conteneur et répété sur la page.

Normalement, pour donner l'illusion qu'il s'étire pour remplir le récipient lorsque le récipient grandit ou rétrécit, vous agrandissez l'image par rapport au récipient. Tout chevauchement ne sera 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 colleriez le côté gauche de votre boîte au côté gauche de votre conteneur avec suffisamment de chevauchement qui (dans des limites raisonnables) quelle que soit la taille du conteneur, il ne manque d'arrière-plan, puis vous superposez une image du côté droit de la boîte avec des bords incurvés et la positionnez à droite du conteneur. Ainsi, à mesure que le récipient rétrécit ou se développe, l'effet de boîte incurvée semble rétrécir ou croître avec lui - ce n'est pas le cas, mais il donne l'illusion de ce qui se passe.

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

Si vous utilisez des graphiques vectoriels, vous êtes bien en dehors de mon domaine d'expertise, je le crains.

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 background-attachmentligne:

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

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

Je voudrais 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 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;
}

Une astuce supplémentaire pour la triche de SolidSmile est de 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;
}

Utilisez la border-image : yourimagepropriété pour définir votre image et la mettre à l'échelle jusqu'à la bordure entière de votre écran ou fenêtre.