Est-il possible de définir la taille de l'image d'arrière-plan avec CSS?
Je veux faire quelque chose comme:
background: url('bg.gif') top repeat-y;
background-size: 490px;
Mais il semble que ce soit totalement faux de le faire comme ça ...
Réponses:
Si vous devez agrandir l'image, vous devez la modifier elle-même dans un éditeur d'images.
Si vous utilisez la balise img, vous pouvez modifier la taille, mais cela ne vous donnera pas le résultat souhaité si vous avez besoin que l'image soit en arrière-plan pour un autre contenu (et elle ne se répétera pas comme vous semblez le vouloir) ...
C'est possible de faire en CSS3 avec background-size.
Tous les navigateurs modernes prennent en charge cela, donc à moins que vous n'ayez besoin de prendre en charge les anciens navigateurs, c'est la façon de le faire.
Navigateurs pris en charge:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) et Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
En particulier, j'aime les valeurs coveret containqui nous donnent un nouveau pouvoir de contrôle que nous n'avions pas auparavant.
Vous pouvez également utiliser ce background-size: roundqui a un sens en combinaison avec la répétition:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
Cela ajustera la largeur de l'image afin qu'elle s'adapte un nombre entier de fois dans la zone de positionnement d'arrière-plan.
Remarque supplémentaire
Si la taille dont vous avez besoin est une taille de pixel statique, il est toujours judicieux de redimensionner physiquement l'image réelle. C'est à la fois pour améliorer la qualité du redimensionnement (étant donné que votre logiciel d'image fait un meilleur travail que les navigateurs), et pour économiser de la bande passante si l'image d'origine est plus grande que celle à afficher.
Seul CSS 3 prend en charge cela,
background-size: 200px 50px;Mais je modifierais l'image elle-même, de sorte que l'utilisateur a besoin de charger moins, et elle pourrait être meilleure qu'une image réduite sans antialiasing.
background: url('resized_image.png')\9;
Si vos utilisateurs utilisent uniquement Opera 9.5+, Safari 3+, Internet Explorer 9+ et Firefox 3.6+, la réponse est oui. Sinon, non.
La propriété background-size fait partie de CSS 3, mais elle ne fonctionnera pas sur la plupart des navigateurs.
Pour vos besoins, agrandissez simplement l'image réelle.
Pas possible . L'arrière-plan sera toujours aussi grand que possible, mais vous pouvez l'empêcher de se répéter avec background-repeat.
background-repeat: no-repeat;Deuxièmement, l'arrière-plan ne va pas dans la zone de marge d'une boîte, donc si vous voulez que l'arrière-plan soit uniquement sur le contenu réel d'une boîte, vous pouvez utiliser la marge au lieu du remplissage.
Troisièmement, vous pouvez contrôler où commence l'image d'arrière-plan. Par défaut, c'est le coin supérieur gauche d'une boîte, mais vous pouvez contrôler cela avec background-position, comme ceci:
background-position: center top;ou peut-être
background-position: 20px -14px;Le positionnement négatif est beaucoup utilisé avec les sprites CSS .
Il y a un argument oublié :
background-size: contain;Ce ne sera pas étirer votre background-imagecomme il le ferait avec cover. Il s'étirerait jusqu'à ce que le côté le plus long atteigne la largeur ou la hauteur du récipient extérieur et préserverait ainsi l'image.
Edit: Il y a aussi -webkit-background-sizeet -moz-background-size.
La propriété de taille d'arrière-plan est prise en charge dans IE9 +, Firefox 4+, Opera, Chrome et Safari 5+.
À l'appui de la réponse donnée par @tetra, je tiens à souligner que si l'image est un SVG, le redimensionnement de l'image réelle n'est pas nécessaire.
Puisqu'un fichier SVG est simplement XML, vous pouvez spécifier la taille que vous souhaitez qu'il apparaisse dans le XML.
Cependant, si vous utilisez la même image SVG à différents endroits et que vous avez besoin qu'elle soit de tailles différentes, l'utilisation background-sizeest très utile. Les fichiers SVG sont intrinsèquement plus petits que les images raster et le redimensionnement à la volée avec CSS peut être très utile sans aucun coût de performance que je sache, et certainement peu ou pas de perte de qualité.
Voici un petit exemple:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}
(Remarque: cela fonctionne pour moi sous OS X 10.7 avec Firefox 8, Safari 5.1 et Chrome 16.0.912.63)
Vous pouvez totalement avec CSS3:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Cela redimensionnera une image d'arrière-plan à 100% de la largeur de l'élément de corps, puis redimensionnera l'arrière-plan en conséquence lorsque l'élément de corps sera redimensionné pour des résolutions plus petites.
Voici l'exemple: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Il suffit d'avoir des divisions imbriquées pour être compatible avec tous les navigateurs
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Vous pouvez utiliser deux <div>éléments:
L'un est un conteneur (c'est celui sur lequel vous vouliez à l'origine que l'image d'arrière-plan apparaisse).
Le second est contenu à l'intérieur. Vous définissez sa taille sur la taille de l'image d'arrière-plan (ou la taille que vous souhaitez voir apparaître).
Le div contenu est alors réglé pour être positionné absolute. De cette façon, il n'interfère pas avec le flux normal des éléments dans le div contenant.
Il vous permet d'utiliser efficacement les images de sprite.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Vous avez écrit
background: url('bg.gif') top repeat-y;
background-size: 490px;mais vous ne verrez l'arrière-plan qu'en fonction de la taille du conteneur.
si vous avez un conteneur vide avec l'URL d'arrière-plan et quelle que soit la taille de l'arrière-plan, vous ne verrez pas le bg.gif.
Si vous définissez la taille du continu sur
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;combiné au code que vous avez écrit ci-dessus, vous pourrez voir le fichier bg.gif.
J'utilise des images d'arrière-plan pour les boutons, mais cela ne montre que l'image de la même taille que le texte, même si je règle la largeur et la hauteur. Au lieu de cela, je remplis mon texte avec des caractères (espaces insécables). J'en tape autant que nécessaire, en gros, jusqu'à ce que tout l'arrière-plan du bouton apparaisse. Donc je pourrais avoir un code comme celui-ci:
Dans la feuille de style:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}Dans le document HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Par exemple: l'
image d'arrière - plan s'adaptera toujours à la taille du conteneur (largeur 100% et hauteur 100 px).
CSS inter-navigateurs:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
C'est possible de faire en CSS3 avec la taille d'arrière-plan
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Si vous souhaitez définir background-sizela même backgroundpropriété, vous pouvez utiliser:
background:url(my-bg.png) no-repeat top center / 50px 50px;