Étirer et mettre à l'échelle une image CSS dans le fond - avec CSS

Je veux que mon image de fond d'étirement et de l'échelle en fonction de la taille de la fenêtre du navigateur.

J'ai vu quelques questions sur Pile Débordement de faire le travail, comme Étirer et de l'échelle de fond de CSS par exemple. Il fonctionne bien, mais je veux mettre l'image à l'aide de background, pas avec un img tag.

Dans un img tag est placé, et puis avec CSS, nous hommage à la img tag.

width:100%; height:100%;

Il fonctionne, mais que la question est un peu vieux, et les états qui en CSS 3 redimensionnement d'une image d'arrière-plan va fonctionner assez bien. J'ai essayé cette exemple le premier, mais ça n'a pas fonctionné pour moi.

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

background-size: 100% 100%;
Peut-être que cette démonstration peut être utile: w3schools.com/cssref/...
Double Possible de CSS image d'arrière-plan pour l'adapter à la largeur, de la hauteur de l'auto-échelle dans la proportion
Ne devrait pas l'âge de la question être un facteur? Celui-ci a été demandé il y a 6 ans et la question que vous avez remarquer a demandé il y a 4 ans.
À mon humble avis, nous ne voulons pas fermer la question avec les meilleures réponses et au lieu d'encourager les doublons lien vers celui-ci. Je suis sûr que cela aurait été discuté sur Meta, mais je ne peux pas le trouver maintenant...
Bien sûr que non, moi non plus.
Beaucoup de questions de ce genre flotter autour de SORTE. Dans celui-ci, c'est marrant le nombre de personnes qui commentent avec leur "grain de sel" sur current CSS3 solutions, et ne se rendent pas compte qu'il était demandé lors de la CSS3 n'était pas fortement de mettre en œuvre et standardisé dans les navigateurs. C'est sûrement un cri, plus de réponse actuelle. Il ya aussi un couple de plus de problèmes avec la question, en raison de ma compréhension de l'objet, sur le moment je l'ai écrit.
Demain je vais commencer une question sur meta.stackoverflow.com sur le meilleur plan d'action pour cette question, je vais poster le lien ici pour quiconque de le suivre. Merci pour l'entrée, toujours les bienvenus.

InformationsquelleAutor Fábio Antunes | 2009-07-19

background css

1017

CSS3 a une jolie petite attribut appelé background-size:cover.

Cette échelle de l'image, de sorte que la zone d'arrière-plan est complètement recouverte par l'image d'arrière-plan tout en maintenant le ratio d'aspect. L'ensemble de la zone sera couverte. Toutefois, une partie de l'image peut ne pas être visible si la largeur/hauteur de l'image est trop grande.
- Les cultures de couverture de l'image si le ratio d'aspect ne correspond pas, donc ce n'est pas une bonne solution.
- background-size: cover ne semble pas fonctionner pour Safari iPad
- dans le cas où vous vous voulez qu'il fonctionne dans les navigateurs IE - github.com/louisremi/background-size-polyfill
- Il ne semble pas fonctionner sur Firefox. Cependant, background-size: 100vw 100vh;fait le truc bien.
- essayez: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
- Si vous voulez, mais uniquement pour l'axe horizontal, utilisez ceci: background-size: 100% auto; stackoverflow.com/questions/41025630/...
- De côté de l'aide background-size:cover... N'oubliez pas d'utiliser des services comme ImageBoss pour générer vos images rapidement. Elle permettrait de réduire votre temps de chargement de la page considérablement la vitesse.
InformationsquelleAutor Vashishtha Jogi
467

Vous pouvez utiliser la propriété CSS3 pour faire assez bien. Il redimensionne ratio donc pas de distorsion de l'image (bien qu'il ne haut de gamme de petites images). Il suffit de noter, ce n'est pas implémenté dans tous les navigateurs encore.
```
background-size: 100%;
```
- Ce joli bien est le code complet! Créer un conteneur avec un background-image et inclure la propriété ci-dessus. Tel que mentionné, la prise en charge du navigateur n'est pas encore bonne et il y a des navigateurs de versions de ce ie. -webkit-background-size etc. Voir W3C CSS3 Module: background-size et css3.info: background-size
- Pour conserver les proportions de l'image, vous devez utiliser "background-size: cover;" ou "background-size: contiennent;". J'ai construit un polyfill qui met en œuvre ces valeurs dans IE8: github.com/louisremi/background-size-polyfill
- Il est également recommandé d'ajouter auto pour conserver les proportions.
- si votre navigateur ne supporte pas elle, vous pouvez toujours utiliser modernizr et poylfills..
InformationsquelleAutor Matt Burgess
183

À l'aide de la code je l'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%;
}
```
Qui produit l'effet désiré: seul le contenu de défilement, pas le fond.

L'arrière-plan de l'image redimensionne la fenêtre d'affichage du navigateur pour la taille de l'écran. Lorsque le contenu n'est pas adapté au navigateur de la fenêtre d'affichage, et l'utilisateur doit faire défiler la page, l'image d'arrière-plan reste fixe dans la fenêtre d'affichage pendant que le contenu défile.

Avec CSS 3, il semble que ce serait beaucoup plus facile.
- Mais ce n'est pas l'image de fond. Vous pouvez faire cela seulement à un bloc, mais pas un élément inline comme un input[type=text]. Ou je me trompe?
- pas besoin de l'class="stretch", il suffit d'utiliser #background img {} comme identifiant dans le css
- z-index: -1; maintient votre image en arrière-plan. Si vous avez envie de montrer votre image au premier plan, vous pouvez soit augmenter le z-index de la valeur ou de le supprimer de l'index.
- La question que je vais avoir est avec IE8. L'image de fond d'une DIV qui s'étend plein, mais dans IE8, les images va à l'extérieur de la DIV donc de ne pas être en mesure de voir l'image complète. Il obtient rogné. Voici ma question: stackoverflow.com/questions/22331179/...
- L'erreur évidente des gens faire est de mettre l'image en background dans le css (c'est à dire par background : url("example.png");) et à utiliser l'attribut css background-size:100%; dessous, nous l'espérons, de redimensionner l'image à la largeur de l'écran. Cela ne fonctionnera pas, il Sera? Si vous voulez mettre une image de fond pour le corps, puis une image de l'attribut doit être ajouté à l'étiquette comme <body background="example.png">. Puis utiliser les css background-size:100%; de l'échelle.
InformationsquelleAutor Fábio Antunes

163

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*/
}

Toutefois, cela ne fonctionne pas avec IE8. Il crée une marge en haut et en bas de la fenêtre.
Sur Android, il a travaillé lors de l'utilisation de html, body {...} au lieu de body {...}.

InformationsquelleAutor

51
```
background-size: 100% 100%; 
```
s'étend de l'arrière-plan pour remplir l'ensemble de l'élément sur les deux axes.

InformationsquelleAutor yeahdixon
39

Le code CSS suivant la partie devrait s'étirer l'image avec tous les navigateurs.

Je le faire dynamiquement pour chaque page. Donc j'utilise le PHP pour générer sa propre balise HTML pour chaque page. Toutes les photos sont dans "l'image" du dossier et à la fin avec "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 avez une seule image de fond pour toutes les pages, vous pouvez supprimer le $pic variable, supprimer échappement antislash, ajuster les chemins et placez 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.
- Votre exemple ne fonctionne pas dans le sens de la rétro-compatibilité, parce que vous avez tout simplement oublié sur le premier '-' de fournisseur de préfixes. Il doit être -webkit-background-size, -moz-background-size et ainsi de suite. Voir developer.mozilla.org/en-US/docs/CSS/... Ou vous allez pour les dont il de l'avenir dans d'abréviation de la propriété comme background: url(img/bg-home.jpg) no-repeat center center / cover fixed;
- Fournisseur de préfixes corrigé.
- C'était la seule solution qui fonctionne pour moi sur IE9. Merci.
InformationsquelleAutor Thorsten Niehues
17

Vous pouvez réellement obtenir le même effet que d'une image de fond avec la balise img. Il vous suffit de définir son z-index inférieur à tout le reste, position:absolute et d'utiliser un arrière-plan transparent pour chaque zone dans le premier plan.
- C'est ce que j'ai vu dans d'autres, TELLEMENT de questions, et des œuvres, mais depuis CSS3 comme sortir, j'ai pensé que c'était un moyen de mieux pour elle.
- Il pourrait être, et en tenant compte de l'évolution de l'utilisation du navigateur, vous pourriez être en mesure de les utiliser commercialement en seulement...10 ans?
- Étant CSS3, il n'y a rien de mal à utiliser un bien que la plupart des navigateurs modernes, voir et donner une norme minimale à la non prise en charge des navigateurs. Ici, par exemple, vous pourriez être en mesure d'utiliser un ennuyeux, mais acceptable arrière-plan en mosaïque pour <IE8 et une belle image pour Firefox/Chrome/Safari/Opera. Aussi, il y a beaucoup de polyfills pour répliquer CSS3 fonctionnalités dans les navigateurs plus anciens avec JavaScript. En d'autres termes, vous n'avez pas besoin d'attendre que tous les navigateur à prendre en charge CSS3 afin de l'utiliser.
- Je viens de trouver ce post qui référence l'utilisation de la propriété de MS AlphaImageLoader: stackoverflow.com/questions/2991623/...
InformationsquelleAutor Kim Stebel

Utiliser ce CSS:

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

InformationsquelleAutor RSH1

14

Cela est expliqué par la CSS astuces: Parfait Full Page Image D'Arrière-Plan

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;
}
```
- basé sur la réponse ci-dessus, j'ai vu le fond de la pièce jointe correctif ne fonctionne pas sur les appareils mobiles et de microsoft à bord. La solution parfaite pour faire des fond d'étirement et de la fixer sur tous les appareils et navigateurs je recommande jquery-backstretch.com
InformationsquelleAutor Aamer Shahzad
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;
}
```
Il travaille:
- Safari 3 ou version ultérieure
- Chrome Quel que soit le ou, plus tard,
- Internet Explorer 9 ou plus tard
- Opéra 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 prise en charge non-fournisseur préfixé version)
- C'est un travail "étirer pour s'adapter à la réponse. Remarque: le format d'image change.
InformationsquelleAutor Arunraj S
10

Afin de redimensionner vos images correctement en fonction de la taille du récipient, utiliser les éléments suivants:
```
background-size: contain;
background-repeat: no-repeat;
```
InformationsquelleAutor justinpees

J'utilise cela, et il 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>

InformationsquelleAutor Mahdi jokar

8

Merci!

Mais alors, il n'a pas de travail pour le Google Chrome et Safari navigateurs (étirement travaillé, mais la taille des images n'était que de 2 mm!), jusqu'à ce que quelqu'un m'a dit ce qui manque:

Essayer de mettre height:auto;min-height:100%;

Changer ainsi que 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 que le code nouvellement ajouté, j'ai ceci dans mon Drupal Tendu thèmes style.css:

html, body{height:100%;}

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

Puis-je faire un nouveau bloc à l'intérieur de Drupal avec l'image tout en ajoutant class=stretch:

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

Juste de la copie d'une image avec l'éditeur dans Drupal bloc ne fonctionne pas; on doit changer l'éditeur de non-texte mis en forme.

InformationsquelleAutor Cybr

Je suis d'accord avec l'image dans l'absolu div avec 100% de largeur et de hauteur. Assurez-vous de mettre 100% de la largeur et de la hauteur pour le corps dans la CSS et de définir les marges et padding à zéro. Une autre question que vous trouverez 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 malheureusement pour effet de rendre toute la page a l'état sélectionné. Vous pouvez contourner cela en utilisant le user-select:none rè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, parce qu'il ne reconnaît pas l'utilisateur-sélectionnez l'option - même pas Internet Explorer 10 aperçu prend en charge, donc vous avez l'option d'utiliser JavaScript pour empêcher image d'arrière-plan de sélection (par exemple, http://www.felgall.com/jstip35.htm ) ou à l'aide de CSS 3 de fond-étirement sur la méthode.

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

alors ne faites pas de l'img, juste un div avec bg il ne faut pas être sélectionné

InformationsquelleAutor Myke Black

J'ai voulu centrer et mettre à l'échelle une image d'arrière-plan, sans l'étirer pour l'ensemble de la page, et je voulais le ratio d'aspect pour être maintenu. Cela a fonctionné pour moi, merci pour les variations suggéré 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%;
}

InformationsquelleAutor AnnieDee

5

J'ai utilisé une combinaison de l'arrière-plan (X propriétés CSS pour réaliser l'idéal de mise à l'échelle de l'image de fond.
```
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
```
Cela rend l'arrière-plan toujours de couvrir l'ensemble de la fenêtre du navigateur et reste centré lors de la mise à l'échelle.

InformationsquelleAutor Ryan Den-Kaat
4

Utiliser le Backstretch plugin. On pourrait même avoir plusieurs images de la diapositive. Il travaille également à l'intérieur des conteneurs. De cette façon, on pourra par exemple avoir seulement une partie de l'arrière-plan était recouvert d'une image d'arrière-plan.

Puisque même moi, je pourrais l'obtenir pour fonctionner prouve qu'il est un facile pour utiliser le plugin :).

InformationsquelleAutor Daniel
3

Si vous voulez avoir le contenu centré horizontalement, d'utiliser une combinaison comme ceci:
```
background-repeat: no-repeat;
background-size: cover;
background-position: center;
```
Ce sera beau.

InformationsquelleAutor Samuel Ramzan
2

Utiliser ce CSS:

background-size: 100% 100%
- Downwoted, c'est un double de la réponse précédente stackoverflow.com/a/35021247/3810453
- Je ne savais pas à propos de la question précédente. Ensuite, vous devez voter pour la fermeture de la question de ne pas downvote ma réponse!
InformationsquelleAutor shady sherif
1

Vous pouvez utiliser le border-image : yourimage de la propriété à l'échelle de l'image jusqu'à la frontière. Même si vous donnez l'image de fond d'écran, la frontière de l'image sera tiré sur elle.

La border-image propriété est très utile si votre feuille de style est mis en œuvre quelque part qui ne prend pas en charge CSS 3. Si vous utilisez Google Chrome ou Firefox, alors je vous recommande le background-size:cover de la propriété elle-même.

InformationsquelleAutor Natesh bhat
0

Voulez-vous de cela, il suffit d'utiliser une image? Parce que vous pouvez réellement faire un peu similaire à un étirement arrière-plan à l'aide de deux images. PNG images par exemple.

Ce que j'ai fait avant, et il n'est pas difficile. D'ailleurs, je pense que l'étirement serait tout simplement nuire à la qualité de l'arrière-plan. Et si vous ajoutez une image énorme il serait de ralentir ralentir les ordinateurs et les navigateurs.
- Bon point. Mais je suis en utilisant jpg pour l'image de fond, elle est d'environ 1500x1000 ne prend guère plus de 100ko. Mais comment avez-vous fait?
- Comment centrer l'image horizontalement et adoucir les bords de l'image avec une couleur unie ou un modèle? Cela vous permettrait d'avoir une parfaite adaptation si l'utilisateur a plus de la résolution de l'image.
- Mais je veux que l'image remplisse l'arrière-plan. Le un votre de dire, c'est ce que je fais d'habitude.
InformationsquelleAutor MarioRicalde

Vous devez vous connecter pour publier un commentaire.

HTML

CSS