Étirer et mettre à l'échelle l'arrière-plan CSS

Question

Existe-t-il un moyen de faire en sorte qu'un arrière-plan en CSS s'étire ou s'agrandisse pour remplir son conteneur ?

Answer 1

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

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

Elle est disponible pour les navigateurs modernes, depuis 2012.

Answer 2

Pour les navigateurs modernes, vous pouvez réaliser 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 pas.

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

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

Answer 3

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 :

<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é !

Pour mettre l'image à l'échelle afin qu'elle soit "à fond perdu" et conserver le rapport hauteur/largeur, vous pouvez procéder comme suit :

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

Cela fonctionne très bien ! Cependant, si une dimension est rognée, elle le sera sur un seul côté de l'image, au lieu d'être rognée uniformément sur les deux côtés (et centrée). Je l'ai testé dans Firefox, Webkit et Internet Explorer 8.

Answer 4

Utilisez le attribut background-size en CSS3 :

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

EDIT : Modernizr soutient détection du support de la taille de l'arrière-plan . Vous pouvez utiliser une solution de contournement JavaScript écrite pour fonctionner selon vos besoins et la charger dynamiquement lorsqu'il n'y a pas de support. Cela permet de maintenir le code sans avoir à recourir à des modifications CSS intrusives pour certains navigateurs.

Personnellement, j'utilise un script pour le gérer en utilisant jQuery, c'est une adaptation de imgsizer . Comme la plupart des conceptions que je fais maintenant utilisent des % de largeur pour des mises en page fluides sur les appareils, il y a une légère adaptation à l'une des boucles (pour tenir 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 .

Answer 5

Essayez l'article taille de fond . Si vous utilisez tous les éléments suivants, il 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%;
}