J'ai...
body {
background: url(images/background.svg);
}
L'effet souhaité est que cette image de fond ait une largeur égale à celle de la page, la hauteur changeant pour maintenir la proportion. Par exemple, si l'image originale fait 100*200 (n'importe quelle unité) et que le corps de la page fait 600px de large, l'image de fond devrait faire 1200px de haut. La hauteur devrait changer automatiquement si la fenêtre est redimensionnée. Cela est-il possible ?
Pour l'instant, Firefox semble adapter la hauteur à la taille de la fenêtre, puis ajuster la largeur. Est-ce parce que la hauteur est la dimension la plus longue et qu'il essaie d'éviter le recadrage ? Je vous voulez recadrer verticalement, puis faire défiler : pas de répétition horizontale.
De même, Chrome place l'image au centre, sans répétition, même lorsque background-repeat:repeat
est indiqué explicitement, ce qui est de toute façon la valeur par défaut.
Il existe une propriété CSS3 pour cela, à savoir [background-size
][1] ([contrôle de compatibilité][2]). Bien que l'on puisse définir des valeurs de longueur, elle est généralement utilisée avec les valeurs spéciales contain
et cover
. Dans votre cas particulier, vous devriez utiliser cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
et cover
.Désolé pour le mauvais jeu de mots, mais je vais utiliser la [photo du jour de Biswarup Ganguly] (https://commons.wikimedia.org/wiki/File:Chicken_Egg_without_Eggshell_5859.jpg) pour la 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.
![écran][3]
Nous voulons utiliser l'image du jour susmentionnée comme arrière-plan. Cependant, nous avons recadré l'image à 4x3 pour une raison quelconque. Nous pourrions définir la propriété background-size
à une longueur fixe, mais nous allons nous concentrer sur contain
et cover
. Notez que je suppose également que nous n'avons pas modifié la largeur et/ou la hauteur de body
.
contain
contenir Met l'image à l'échelle, tout en préservant son rapport d'aspect intrinsèque (s'il y en a un), à la plus grande taille telle que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.
Cela permet de s'assurer que l'image d'arrière-plan est toujours complètement contenue dans la zone de positionnement de l'arrière-plan, mais il peut y avoir un espace vide rempli avec votre background-color
dans ce cas :
![contenir][4]
cover
couvrir Mettez l'image à l'échelle, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la plus petite taille telle que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement de l'arrière-plan.
Cela permet de s'assurer que l'image d'arrière-plan couvre tout. Il n'y aura pas de background-color
visible, mais selon le rapport de l'écran, une grande partie de votre image pourrait être coupée :
![couverture][5]
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><div></code>.</p>
</div>
[1] : http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-background-size [2] : http://www.standardista.com/css3/css3-background-properties/ [3] : http://i.stack.imgur.com/rCjKe.png [4] : http://i.stack.imgur.com/mAtCl.png [5] : http://i.stack.imgur.com/p96P5.png [6] : http://i.stack.imgur.com/r5CAq.jpg
En me basant sur les conseils de https://developer.mozilla.org/en-US/docs/CSS/background-size, j'ai obtenu 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;
}
Je ne sais pas exactement ce que vous recherchez, mais vous devriez vraiment consulter ces excellents articles de blog écrits par Chris Coyier de CSS-Tricks :
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 correspondent à ce que vous recherchez.
Le premier répond à la question suivante :
Existe-t-il un moyen de rendre une image d'arrière-plan redimensionnable ? Par exemple, remplir l'arrière-plan d'une page Web bord à bord avec une image, quelle que soit la taille de la fenêtre du navigateur. Vous pouvez également faire en sorte que l'image soit plus grande ou plus petite lorsque la fenêtre du navigateur change. Il faut également s'assurer que l'image conserve son ratio (elle ne s'étire pas bizarrement). De plus, il ne crée pas de barres de défilement, il se coupe verticalement si nécessaire. Enfin, elle est insérée dans la page sous la forme d'une balise en ligne.
L'objectif du deuxième article est d'obtenir ce qui suit : une " image d'arrière-plan sur un site Web qui couvre la totalité de la fenêtre du navigateur à tout moment " ;
J'espère que cela vous aidera.