Image de fond CSS pour ajuster la largeur, la hauteur devrait s'échelonner automatiquement en proportion

j'ai

body {
    background: url(images/background.svg);
}

l'effet désiré est que cette image de fond aura une largeur égale à celle de la page, la hauteur changeant pour maintenir la proportion. par exemple, si l'image originale est de 100*200 (n'importe quelle unité) et que le corps a une largeur de 600px, l'image de fond devrait finir par avoir une hauteur de 1200px. La hauteur doit changer automatiquement si la fenêtre est redimensionnée. Est-ce possible?

en ce moment, Firefox semble faire la hauteur et le réglage de la largeur. Est-ce peut-être parce que la hauteur est la plus longue dimension et il essaie d'éviter de couper? J' veulent pour la culture à la verticale, puis faites défiler l'écran: pas de répétition horizontale.

aussi, Chrome place l'image au centre, pas de répétition, même si background-repeat:repeat est donné explicitement, ce qui est de toute façon la valeur par défaut.

276
demandé sur spraff 2012-02-13 19:14:33

10 réponses

il y a une propriété CSS3 pour cela, à savoir background-size ( contrôle de compatibilité ). Alors qu'on peut définir des valeurs de longueur, il est généralement utilisé avec les valeurs spéciales contain et cover . Dans votre cas particulier, vous devez utiliser cover :

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation pour contain et cover

Désolé pour le mauvais jeu de mots, mais je vais utiliser le image du jour par Biswarup Ganguly pour démonstration. Disons que c'est votre écran, et que la zone grise est en dehors de votre écran visible. Pour la démonstration, je vais supposer un rapport 16x9.

screen

nous voulons utiliser comme arrière-plan la photo du jour mentionnée ci-dessus. Cependant, nous avons recadré l'image en 4x3 pour une raison quelconque. Nous pourrions définir la propriété background-size à une longueur fixe, mais nous focus sur contain et cover . Notez que je suppose aussi que nous n'avons pas modifié la largeur et/ou la hauteur de body .

contain

contain

dimensionner l'image, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la plus grande taille de sorte que sa largeur et sa hauteur puissent s'adapter à l'intérieur de la zone de positionnement arrière-plan.

cela assure que l'arrière-plan l'image est toujours complètement contenue dans la zone de positionnement de fond, cependant, il pourrait y avoir un certain espace vide rempli de votre background-color dans ce cas:

contain

cover

cover

dimensionner l'image, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la plus petite taille de sorte que sa largeur et sa hauteur puissent couvrir complètement l'arrière-plan zone de positionnement.

cela permet de s'assurer que l'image de fond couvre tout. Il n'y aura pas de background-color visible , cependant selon le ratio de l'écran une grande partie de votre image pourrait être coupée:

cover

démonstration avec code réel

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>
667
répondu Zeta 2015-11-06 08:33:18

basé sur les conseils de https://developer.mozilla.org/en-US/docs/CSS/background-size je finis avec la recette suivante qui a fonctionné pour moi

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
29
répondu Yauhen Yakimovich 2013-01-15 22:40:04

Je ne suis pas sûr de ce que vous cherchez exactement, mais vous devriez vraiment vérifier ces excellents billets de blog écrit par Chris Coyier de CSS-trucs:

http://css-tricks.com/how-to-resizeable-background-image /

http://css-tricks.com/perfect-full-page-background-image /

lisez les descriptions de chacun des articles et voyez s'ils sont ce que vous cherchez pour.

la première réponse à la question suivante:

y a-t-il un moyen de rendre une image de fond redimensionnable? Comme dans, remplissez l'arrière-plan d'une page Web bord à bord avec une image, peu importe la taille de la fenêtre du navigateur. Aussi, faites-le redimensionner plus grand ou plus petit que la fenêtre du navigateur change. Aussi, assurez-vous qu'il conserve son ratio (ne pas étirer bizarre). En outre, ne provoque pas de barres de défilement, coupe juste verticalement si elle a besoin. Également, apparaît sur la page comme une balise en ligne.

l'Objectif du second post est d'obtenir ce qui suit, une" image de fond sur un site web qui couvre toute la fenêtre du navigateur à tout moment. "

Espérons que cette aide.

11
répondu element119 2012-02-13 16:49:17

Essayez cette,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
6
répondu Laxman Maurya 2015-07-29 06:57:31

il suffit d'ajouter cette ligne:

    .your-class {
        height: 100vh;
    }

VH est la hauteur du viewport. Cette échelle s'ajustera automatiquement à la fenêtre du navigateur de l'appareil.

Cliquez ici pour en savoir plus: Make div 100% height of browser window

6
répondu Ruto Collins 2017-11-09 09:44:10

image d'arrière-plan n'est pas Parfaite, puis son css est le problème de créer son fichier css changement de code ci-dessous

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; background-size: 100% 100%; "

3
répondu jignesh vasoya 2017-05-26 07:14:19

j'ai eu le même problème, incapable de redimensionner l'image en ajustant les dimensions du navigateur.

Mauvais Code:



html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}



Bon Code:



html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

La clé ici est l'ajout de cet élément -> background-size: contiennent;

2
répondu CodingWoodsman 2014-01-15 19:21:23

voici ce qui a fonctionné pour moi:

background-size: auto 100%;
1
répondu Danny McMurray 2017-08-16 15:47:52
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
0
répondu Adriaan Mouton 2018-10-08 09:34:45

fixer la taille de fond n'aide pas, la solution suivante a fonctionné pour moi:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

il récolte essentiellement l'image et le rend apte dans, background-size: contain/cover n'a toujours pas fait adapté.

-2
répondu anonymous 2018-01-08 00:03:36