Étirez et mettez à l'échelle une image CSS en arrière-plan - avec CSS uniquement

853

Je souhaite que mon image d'arrière-plan s'étire et soit mise à l'échelle 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 une imgbalise.

Dans celui-ci, une imgbalise est placée, puis avec CSS, nous rendons hommage à la imgbalise.

width:100%; height:100%;

Cela fonctionne, mais cette question est un peu ancienne et indique qu'en CSS 3, le redimensionnement d'une image d'arrière-plan fonctionnera plutôt bien. J'ai essayé cet exemple le premier , mais cela n'a pas fonctionné pour moi.

Existe-t-il une bonne méthode pour le faire avec la background-imagedéclaration?

css  background 
— Fábio Antunes
source
113
taille de l'arrière-plan: 100% 100%;
— Andreas L.
5
Peut-être que cette démo peut être utile: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas L'âge de la question ne devrait-il pas être un facteur? Celui-ci a été posé il y a 6 ans et la question que vous avez soulevée a été posée il y a 4 ans.
— Fábio Antunes
@ FábioAntunes IMHO, nous ne voudrions pas fermer la question avec les meilleures réponses et encourager les doublons à s'y connecter. Je suis sûr que cela aurait été discuté sur Meta mais je ne le trouve pas maintenant ...
— Alex Angas

Réponses:

1048

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

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

— Vashishtha Jogi
source
11
La couverture recadre l'image si le rapport d'aspect ne correspond pas, donc ce n'est pas une bonne solution générale.
— mahemoff
1
au cas où vous voudriez qu'il fonctionne dans les navigateurs IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Cela ne semble pas fonctionner sur Firefox. Cependant, background-size: 100vw 100vh;fait bien l'affaire.
— Yannick Mauray
5
@YannickMauray essayez: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Si vous le souhaitez, mais uniquement pour l'axe horizontal, utilisez ceci: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

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

background-size: 100%;
— Matt Burgess
source
19
@nXqd C'est à peu près le code complet! Créez un conteneur avec un background-imageet incluez la propriété ci-dessus. Comme mentionné, la prise en charge du navigateur n'est pas encore bonne et il existe des versions spécifiques à ce navigateur, par exemple. -webkit-background-sizeetc. Voir Module CSS3 W3C: background-size et css3.info: background-size
— MrWhite
15
Pour conserver le rapport hauteur / largeur de l'image, vous devez utiliser "background-size: cover;" ou "background-size: contain;". J'ai construit un polyfill qui implémente ces valeurs dans IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
Il est également conseillé d'ajouter autopour préserver les proportions.
— Chibueze Opata
186

En utilisant le code que 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 souhaité: 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 n'importe quelle taille d'écran. Lorsque le contenu ne correspond pas à la fenêtre du navigateur et que l'utilisateur doit 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.

— Fábio Antunes
source
12
Mais ce n'est pas une image de fond. Vous ne pouvez le faire que sur un bloc, mais pas sur un élément en ligne tel qu'une entrée [type = texte]. Ou ai-je tort?
— deerchao
11
pas besoin de class = "stretch", utilisez simplement #background img {} comme identifiant dans le css
— BerggreenDK
indice z: -1; garde votre image en arrière-plan. Si vous souhaitez afficher votre image au premier plan, vous pouvez soit augmenter la valeur de l'index z, soit supprimer cet index.
— gokhanakkurt
Le problème que j'ai est avec IE8. L'image d'arrière-plan d'un DIV s'étire complètement mais dans IE8, les images sortent du DIV et ne peuvent donc pas voir l'image complète. Il se détache. Voici ma question: stackoverflow.com/questions/22331179/…
— Si8
1
L'erreur évidente que les gens font est de mettre l'image d'arrière-plan dans le CSS (c'est-à-dire par background : url("example.png");) puis d'utiliser l'attribut CSS en background-size:100%;dessous pour, espérons-le, redimensionner l'image en fonction de la largeur de l'écran. Cela ne fonctionnera pas, n'est-ce pas? Si vous souhaitez mettre une image d'arrière-plan pour le corps, un attribut d'image doit être ajouté à la balise body comme <body background="example.png">. Utilisez ensuite css background-size:100%;pour le mettre à l'échelle.
— sjsam
166

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*/
}
— Josh Crozier
source
Cependant, cela ne fonctionne pas dans IE8. Il crée une marge en haut et en bas de la fenêtre.
— erdomester
Sur Android, cela a fonctionné lors de l'utilisation html, body {...}au lieu de body {...}.
— Edward
53 
background-size: 100% 100%;

étire l'arrière-plan pour remplir tout l'élément sur les deux axes.

— ouaisdixon
source
40

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

Je le fais dynamiquement pour chaque page. Par conséquent, j'utilise PHP pour générer sa propre balise 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 la $picvariable, supprimer les barres obliques inversées, ajuster les chemins d'accès et placer 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.

— Thorsten Niehues
source
2
Votre exemple ne fonctionne pas dans le sens de la compatibilité descendante, car vous avez simplement oublié le premier «-» des préfixes de fournisseur. Ça doit être -webkit-background-size, -moz-background-sizeet ainsi de suite. Voir developer.mozilla.org/en-US/docs/CSS/… Ou vous allez l'inclure à l'épreuve du temps dans une propriété abrégée commebackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
C'était la seule solution qui fonctionnerait pour moi sur IE9. Merci.
— robnick
17

Vous pouvez réellement obtenir le même effet qu'une image d'arrière-plan avec la balise img. Il vous suffit de définir son z-index plus bas que tout le reste, de définir la position: absolue et d'utiliser un arrière-plan transparent pour chaque boîte au premier plan.

— Kim Stebel
source
C'est ce que j'ai vu dans d'autres questions SO, et ça marche, mais depuis que CSS3 est sorti, je pensais que c'était maintenant une meilleure façon d'y arriver.
— Fábio Antunes
3
Il pourrait y avoir et compte tenu des développements dans l'utilisation du navigateur, vous pourriez être en mesure de les utiliser commercialement en seulement ... 10 ans?
— Kim Stebel
Étant CSS3, il n'y a rien de mal à utiliser une propriété que les navigateurs les plus modernes voient et à donner une norme minimale aux navigateurs non pris en charge. Ici, par exemple, vous pourrez peut-être utiliser un arrière-plan en mosaïque ennuyeux mais acceptable pour <IE8 et une belle image pour Firefox / Chrome / Safari / Opera. En outre, il existe de nombreux polyfills pour répliquer la fonctionnalité CSS3 dans les anciens navigateurs avec JavaScript. En d'autres termes, vous n'avez pas besoin d'attendre que chaque navigateur prenne en charge CSS3 pour l'utiliser.
— Dan Blows
Je viens de trouver cet autre article qui fait référence à l'utilisation du MS AlphaImageLoader propriétaire: stackoverflow.com/questions/2991623/…
— uglymunky
17

Utilisez ce CSS:

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

Elle est expliquée par les astuces CSS: Image d'arrière-plan pleine page parfaite

Démo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Code:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
source
sur la base de la réponse ci-dessus, j'ai vu que la correction de la pièce jointe en arrière-plan ne fonctionne pas sur les appareils mobiles et Microsoft Edge. La solution parfaite pour étirer et réparer l'arrière-plan sur tous les appareils et navigateurs Je recommande jquery-backstretch.com
— Aamer Shahzad
15

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 version ultérieure
  • Chrome peu importe ou plus tard
  • Internet Explorer 9 ou version ultérieure
  • Opera 10 ou version ultérieure (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)
— Arunraj S
source
Il s'agit d'une réponse "stretch to fit" qui fonctionne. Remarque: le rapport d'aspect changera.
— devdrc
10

Afin de mettre à l'échelle vos images en fonction de la taille du conteneur, utilisez ce qui suit:

background-size: contain;
background-repeat: no-repeat;
— justinpees
source
9

J'utilise ceci, et cela fonctionne avec tous les navigateurs:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi jokar
source
9

Merci!

Mais il ne fonctionnait pas pour les Google Chrome et Safari navigateurs (stretching travaillés, mais la hauteur des images était seulement 2 mm!) , Jusqu'à ce que quelqu'un m'a dit ce qui manque:

Essayez de définir height:auto;min-height:100%;

Alors changez cela pour votre height:100%;ligne, donne:

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

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

Juste avant ce code nouvellement ajouté, j'ai ceci dans mes thèmes Drupal Tendustyle.css :

html, corps {hauteur: 100%;}

#page {background: #ffffff; hauteur: auto! important; hauteur: 100%; hauteur min: 100%; position: relative;}

Ensuite, je dois faire un nouveau bloc dans Drupal avec l'image tout en ajoutant class=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

Copier simplement une image avec l'éditeur dans ce bloc Drupal ne fonctionne pas; il faut changer l'éditeur en texte non formaté.

— Cybr
source
8

Je suis d'accord avec l'image en div absolue avec 100% de largeur et hauteur. Assurez-vous de définir 100% de largeur et de hauteur pour le corps dans le CSS et définissez les marges et le rembourrage à zéro. Un autre problème que vous constaterez avec cette méthode est que lors de la sélection de texte, la zone de sélection peut parfois englober l'image d'arrière-plan, ce qui a le malheureux effet de rendre la page entière à l'état sélectionné. Vous pouvez contourner cela en utilisant la user-select:nonerègle CSS, comme ceci:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Encore une fois, Internet Explorer est le méchant ici, car il ne reconnaît pas l'option de sélection par l'utilisateur - pas même l' aperçu d' Internet Explorer 10 ne le prend en charge, vous avez donc la possibilité d'utiliser JavaScript pour empêcher la sélection d'image d'arrière-plan (par exemple, http : //www.felgall.com/jstip35.htm ) ou en utilisant la méthode CSS -background-stretch.

De plus, pour le référencement, je mettrais l'image d'arrière-plan en bas de la page, mais si l'image d'arrière-plan prend trop de temps à charger (c'est-à-dire avec un fond blanc au départ), vous pouvez vous déplacer vers le haut de la page.

— Myke Black
source
alors n'utilisez pas img juste un div avec bg il ne devrait pas être sélectionné
— Jacek Pietal
7

Je voulais centrer et mettre à l'échelle une image d'arrière-plan, sans l'étirer sur la page entière, et je voulais que le rapport d'aspect soit maintenu. Cela a fonctionné pour moi, grâce aux variations suggérées dans d'autres réponses:

IMAGE EN LIGNE: ------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
source
5

J'ai utilisé une combinaison des propriétés CSS background-X pour obtenir l'image d'arrière-plan de mise à l'échelle idéale.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Cela fait que l'arrière-plan couvre toujours toute la fenêtre du navigateur et reste centré lors de la mise à l'échelle.

— Ryan Den-Kaat
source
4

Utilisez le plugin Backstretch . On pourrait même faire glisser plusieurs images. Il fonctionne également dans des conteneurs. De cette façon, par exemple, on pourrait avoir seulement une partie de l'arrière-plan recouvert d'une image d'arrière-plan.

Puisque même je pourrais le faire fonctionner, cela prouve que c'est un plugin facile à utiliser :).

— Daniel
source
3

Si vous souhaitez que le contenu soit centré horizontalement, utilisez une combinaison comme celle-ci:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Cela sera magnifique.

— Samuel Ramzan
source
1

Vous pouvez utiliser la border-image : yourimagepropriété pour mettre l'image à l'échelle jusqu'à la bordure. Même si vous donnez l'image d'arrière-plan, l'image de bordure sera dessinée dessus.

La border-imagepropriété est très utile si votre feuille de style est implémentée quelque part qui ne prend pas en charge CSS 3. Si vous utilisez Google Chrome ou Firefox, je recommande la background-size:coverpropriété elle-même.

— Natesh bhat
source
0

Voulez-vous y parvenir en utilisant une seule image? Parce que vous pouvez en fait créer un peu un fond d'étirement en utilisant deux images. Des images PNG par exemple.

Je l'ai déjà fait auparavant, et ce n'est pas si difficile. En outre, je pense que l'étirement nuirait à la qualité de l'arrière-plan. Et si vous ajoutez une image énorme, cela ralentirait les ordinateurs et les navigateurs.

— MarioRicalde
source
Bon point. Mais j'utilise jpg pour l'image de fond, shes est d'environ 1500x1000 ne prend qu'un peu plus de 100 Ko. Mais comment as-tu fait?
— Fábio Antunes
1
Que diriez-vous de centrer l'image horizontalement et d'adoucir les bords de l'image avec une couleur unie ou un motif? Cela vous permettrait d'avoir une adaptation transparente si l'utilisateur a plus que la résolution de l'image.
— MarioRicalde
Mais je veux que l'image remplisse l'arrière-plan. Celui que tu dis, c'est ce que je fais d'habitude.
— Fábio Antunes
0

Ce qui suit a fonctionné pour moi.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

qui a fonctionné pour couvrir tout l'arrière-plan sur différentes dimensions

— tony2tones
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.