Question Étirer et mettre à l'échelle une image CSS en arrière-plan - avec CSS seulement


Je veux que mon image d'arrière-plan s'étire et évolue en fonction de la taille de la fenêtre du navigateur.

J'ai vu quelques questions sur Stack Overflow qui font le travail, comme Étirer et mettre à l'échelle le fond CSS par exemple. Cela fonctionne bien, mais je veux placer l'image en utilisant background, pas avec un img marque.

Dans celui-là un img tag est placé, puis avec CSS, nous rendons hommage à la img marque.

width:100%; height:100%;

Cela fonctionne, mais cette question est un peu ancienne et indique que le redimensionnement d'une image de fond dans CSS 3 fonctionnera plutôt bien. J'ai essayé ça exemple le premiermais ça n'a pas marché pour moi.

Y a-t-il une bonne méthode pour le faire avec le background-image déclaration?


734
2017-07-19 15:51


origine


Réponses:


CSS3 a un joli petit attribut appelé background-size:cover.

Cela met à l'échelle l'image de sorte que la zone d'arrière-plan soit entièrement couverte par l'image d'arrière-plan tout en conservant le rapport d'aspect. La zone entière sera couverte, mais une partie de l'image peut ne pas être visible si la largeur / hauteur de l'image redimensionnée est trop grande


889
2017-09-10 14:28



Vous pouvez utiliser la propriété CSS3 pour le faire très bien. Il redimensionne au ratio donc pas de distorsion d'image (bien qu'il fasse des petites images haut de gamme). Il suffit de noter, il n'est pas encore implémenté dans tous les navigateurs.

background-size: 100%;

451
2018-02-28 00:44



En utilisant le code J'ai mentionné...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

Cela produit l'effet désiré: seul le contenu défilera, pas l'arrière-plan.

L'image d'arrière-plan est redimensionnée dans la fenêtre du navigateur pour toute taille d'écran. Lorsque le contenu ne correspond pas à la fenêtre d'affichage du navigateur et que l'utilisateur a besoin de faire défiler la page, l'image d'arrière-plan reste fixe dans la fenêtre pendant que le contenu défile.

Avec CSS 3, il semble que ce serait beaucoup plus facile.


181
2017-07-30 18:21



CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

157
2018-03-23 19:58



background-size: 100% 100%; 

étire bg pour remplir l'élément entier sur les deux axes


41
2018-01-26 18:34



La partie CSS suivante devrait étirer l'image avec tous les navigateurs.

Je fais ceci dynamiquement pour chaque page. Par conséquent, j'utilise PHP pour générer son propre tag HTML pour chaque page. Toutes les images sont dans le dossier 'image' et se terminent par 'Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Si vous n'avez qu'une seule image d'arrière-plan pour toutes les pages, vous pouvez supprimer $pic variable, supprime les barres obliques qui s'échappent, ajuste les chemins et place ce code dans votre fichier CSS.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Cela a été testé avec Internet Explorer 9, Chrome 21 et Firefox 14.


39
2017-08-06 13:41



Utilisez ce CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

17
2018-05-09 09:41



Vous pouvez réellement obtenir le même effet qu'une image d'arrière-plan avec la balise img. Il suffit de placer son z-index plus bas que tout le reste, positionnez set: absolute et utilisez un arrière-plan transparent pour chaque case du premier plan.


15
2017-07-19 17:14



Vous pouvez ajouter cette classe dans votre fichier CSS.

.stretch {
            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 fonctionne dans:

  • Safari 3 ou plus tard
  • Chrome Peu importe ou plus tard
  • Internet Explorer 9 ou plus tard
  • Opéra 10 ou plus tard (Opera 9.5 pris en charge background-size, mais pas les mots-clés)
  • Firefox 3.6 ou version ultérieure (Firefox 4 prend en charge la version préfixée non fournisseur)

14
2018-04-17 07:57