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.
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.
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:
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:
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><div></code>.</p>
</div>
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;
}
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.
Essayez cette,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
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
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%; "
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;
voici ce qui a fonctionné pour moi:
background-size: auto 100%;
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
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é.