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

Question

C'est aussi simple que cela.

J'ai fait évoluer ma mise en page vers un territoire fluide, en travaillant sur des images modulables. L'utilisation de la balise img et le réglage de la largeur maximale à 100 % fonctionnent parfaitement, mais je préférerais utiliser une div avec l'image comme arrière-plan.

Le problème que je rencontre est que l'image ne s'adapte pas à la taille de la div dont elle est l'arrière-plan. Il est possible d'ajouter une balise au code de l'arrière-plan pour le fixer à 100% de la largeur de son conteneur ?

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

Answer 1

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;

Toutefois, comme l'a également indiqué 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

Answer 2

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 pour voir laquelle vous convient le mieux : https://developer.mozilla.org/en-US/docs/Web/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

Answer 3

On dirait que vous essayez de mettre à l'échelle l'image d'arrière-plan ? Il y a un excellent article dans la référence ci-dessous où vous pouvez utiliser css3 pour y parvenir.

Et si j'ai mal lu la question, j'accepte humblement les votes négatifs. (Mais c'est toujours bon à savoir)

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, il n'est pas facile de le faire sur IE. Il existe cependant des solutions de contournement, comme 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 des 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 cela vous aidera !

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

Answer 4

Malheureusement, il n'y a pas de min (ou max )-background-size en CSS, vous ne pouvez utiliser que background-size . Toutefois, si vous recherchez une image de fond réactive, vous pouvez utiliser Vmin y Vmax pour la background-size pour obtenir un résultat similaire.

exemple :

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

qui fixe la hauteur à 10 % de la fenêtre de visualisation la plus petite, qu'elle soit verticale ou horizontale, et la largeur à 100 %.

Pour en savoir plus sur les unités css, cliquez ici : https://www.w3schools.com/cssref/css_units.asp

Answer 5

C'est la solution que vous recherchez !

background-size: 100% auto;