web-dev-qa-db-fra.com

Existe-t-il un moyen d'utiliser la largeur et la hauteur maximales pour une image d'arrière-plan?

C'est simple.

Déplacer ma mise en page dans un territoire fluide, travailler sur des images évolutives. L'utilisation de la balise img et la définition de la largeur maximale à 100% fonctionnent parfaitement, mais je préfère utiliser un div avec l'image définie comme arrière-plan.

Le problème que je rencontre est que l'image ne s'adapte pas à la taille de la div en arrière-plan. Est-il possible d'ajouter du balisage au code d'arrière-plan pour le définir à 100% de la largeur de son conteneur?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}
imagefluidcss
39
technopeasant

Vous pouvez le faire avec background-size:

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

Il existe de nombreuses valeurs autres que cover que vous pouvez définir background-size à, voir lequel vous convient le mieux: https://developer.mozilla.org/en/CSS/background-size

Spec: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

Il fonctionne dans tous les navigateurs modernes: http://caniuse.com/#feat=background-img-opts

17
thirtydot

Comme l'a dit thirtydot, vous pouvez utiliser le CSS3 background-size syntaxe:

Par exemple: 

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

Cependant, comme l'a également déclaré thirtydot, cela ne fonctionne pas dans IE6, 7 et 8.

Voir les liens suivants pour plus d'informations sur background-size: http://www.w3.org/TR/css3-background/#the-background-size

30
Dan

On dirait que vous essayez de redimensionner l'image d'arrière-plan? Il y a un excellent article dans le soufflet de référence où vous pouvez utiliser css3 pour y parvenir.

Et si j'ai mal lu la question, j'accepte humblement les votes. (Encore bon à savoir cependant)

Veuillez considérer le code suivant:

#some_div_or_body { 
   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;
}

Cela fonctionnera sur tous les principaux navigateurs, bien sûr, cela n'est pas facile sur IE. Il existe cependant quelques solutions de contournement telles que l'utilisation des filtres de Microsoft:

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

Il existe quelques alternatives qui peuvent être utilisées avec un peu de tranquillité d'esprit en utilisant jQuery:

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery:

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

J'espère que ça aide!

Src: image d'arrière-plan pleine page parfaite

13
Philll_t

Malheureusement, il n'y a pas de min (ou max) - taille d'arrière-plan en CSS, vous ne pouvez utiliser que background-size. Cependant, si vous recherchez une image d'arrière-plan réactive, vous pouvez utiliser les unités Vmin et Vmax pour background-size propriété pour obtenir quelque chose de similaire.

exemple:

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

qui définira la hauteur à 10% de la plus petite fenêtre que vous ayez, qu'elle soit verticale ou horizontale, et définira la largeur à 100%.

En savoir plus sur les unités CSS ici: https://www.w3schools.com/cssref/css_units.asp

5
Hejar