Définir la taille sur l'image de fond avec CSS?
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 c'est totalement faux de le faire comme ça ...
CSS2
Si vous devez agrandir l'image, vous devez éditer l'image elle-même dans un éditeur d'image.
Si vous utilisez la balise img, vous pouvez modifier la taille, mais cela ne vous donnera pas le résultat souhaité si vous souhaitez que l'image soit l'arrière-plan d'un autre contenu (et elle ne se répétera pas comme vous semblez vouloir) ...
CSS3 libérer les pouvoirs
Ceci est possible en CSS3 avec background-size.
Tous les navigateurs modernes le prennent en charge. À moins que vous n’ayez besoin de prendre en charge les anciens navigateurs, c’est le moyen de le faire.
Navigateurs supportés:
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;
}
J'aime particulièrement les valeurs cover et contain qui nous donnent un nouveau pouvoir de contrôle que nous n'avions pas auparavant.
Rond
Vous pouvez également utiliser background-size: round qui a une signification en combinaison avec repeat:
.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 de manière à ce qu'elle tienne un nombre entier de fois dans la zone de positionnement de l'arrière-plan.
Note complé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 originale est plus grande que ce qu’elle doit afficher.
Seul CSS 3 supporte cela,
background-size: 200px 50px;
Mais je voudrais éditer l'image elle-même, de sorte que l'utilisateur doit charger moins, et cela peut sembler mieux qu'une image rétrécie sans antialiasing.
Si vos utilisateurs n'utilisent que 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 ne fonctionnera pas sur la plupart des navigateurs.
Pour vos besoins, agrandissez simplement l'image réelle.
Impossible . 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 n’entre pas dans la zone de marge d’une zone. Par conséquent, si vous souhaitez que l’arrière-plan se trouve uniquement sur le contenu réel d’une zone, vous pouvez utiliser une marge au lieu d’un remplissage.
Troisièmement, vous pouvez contrôler le début de l’image d’arrière-plan. Par défaut, c'est le coin en haut à 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 très utilisé avec sprites CSS .
Pas trop dur, si vous n'avez pas peur d'aller un peu plus en profondeur :)
Il y a un argument oublié :
background-size: contain;
Cela n’étirera pas votre background-image comme ce serait le cas avec cover. Il s’étendrait jusqu’à ce que le côté le plus long atteigne la largeur ou la hauteur du conteneur extérieur, préservant ainsi l’image.
Edit: Il y a aussi -webkit-background-size et -moz-background-size.
La propriété background-size est prise en charge dans IE9 +, Firefox 4+, Opera, Chrome et Safari 5+.
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 body, puis redimensionnera l'arrière-plan en conséquence, à mesure que l'élément body redimensionnera pour des résolutions plus petites.
Voici l'exemple: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
background-size: 200px 50px changez-le à 100% à 100% et il s'adaptera aux besoins de la balise de contenu comme ul li ou div ... essayé
Pour appuyer la réponse donnée par @tetra, je tiens à souligner que si l’image est un fichier SVG, le redimensionnement de l’image réelle n’est pas nécessaire.
Dans la mesure où un fichier SVG est uniquement du code XML, vous pouvez spécifier la taille souhaitée de votre choix.
Cependant, si vous utilisez la même image SVG à différents endroits et que vous avez besoin de tailles différentes, utiliser background-size est 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 sans perte de qualité, voire aucune.
Voici un exemple rapide:
<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)
Il suffit d'avoir des divs imbriqués compatibles 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 éléments <div>:
L’un est un conteneur (c’est celui auquel vous vouliez initialement que l’image d’arrière-plan apparaisse).
Le second est contenu à l'intérieur. Vous définissez sa taille en fonction de la taille de l'image d'arrière-plan (ou de la taille à afficher).
Le div contenu est alors configuré 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 Sprite.
Vous avez écrit
background: url('bg.gif') top repeat-y;
background-size: 490px;
mais vous ne verrez que l’arrière-plan en fonction de la taille du conteneur.
si vous avez un conteneur vide avec l'URL de fond 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 contenu 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.
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 ne pouvez pas définir la taille de votre image d'arrière-plan avec la version actuelle de CSS (2.1).
Vous pouvez uniquement définir: position, fix, image-url, repeat-mode et color.
background-size fonctionne dans Chrome 4.1, mais je ne pouvais pas le faire fonctionner dans Firefox 3.6.
Si vous voulez définir background-size dans la même propriété background, vous pouvez utiliser:
background:url(my-bg.png) no-repeat top center / 50px 50px;
J'utilise des images d'arrière-plan pour les boutons, mais cela n'affiche l'image que de la même taille que le texte, même si je règle la largeur et la hauteur. Au lieu de cela, je complète mon texte avec 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 ça:
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 -->
Ceci est possible en CSS3 avec background-size
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
Par exemple:
L’image d’arrière-plan s'adapte toujours à la taille du conteneur (largeur 100% et hauteur 100px).
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;
}