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) ...
CSS3 libère les pouvoirs
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:200px150px;}.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.
Rond
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.
A noter qu'il y a aussi la question des écrans rétine sur iPad et iPhone et probablement d'autres appareils haute résolution à venir. Cela signifie qu'il peut être utile de redimensionner des images plus grandes à l'aide de CSS et d'utiliser plusieurs fichiers CSS et d'autres astuces pour servir des images spécifiques. Belle introduction ici: webmonkey.com/2012/03/…
Leo
C'est la pire solution pour l'instant, car tous les magasins de commerce électronique ne vont pas redimensionner l'image comme suggéré. En 2009, il était très probablement proche de la meilleure option, maintenant utilisez simplement les attributs de taille comme ci-dessous.
ShaunOReilly
332
Seul CSS 3 prend en charge cela,
background-size:200px50px;
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.
taille de l'arrière-plan: 100%; position de fond: centre; - cela fonctionne dans IE6 fonctionnant sur ma machine virtuelle sur XP Home.
InnateDev
7
IE 6,7,8 n'est pas «la plupart des navigateurs».
Mahmoodvcs
1
Même en 2013 - alors que le commentaire «IE6,7,8 n'est pas« la plupart des navigateurs »» pourrait être partiellement vrai en ce qui concerne IE6; Malheureusement, IE7 et IE8 ont encore une part de marché assez importante. La meilleure façon que j'ai trouvée pour ce faire est d'utiliser Javascript en combinaison avec modernizr (ou d'autres moyens de baliser 'OLDIE').
AndrewPK
19
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 .
Non, ce n'est pas aussi grand que possible. C'est toujours la même taille, mais je dois le faire plus grand.
Johan
Eh bien, ce n'est pas possible. Il pourrait y avoir des options pour le faire dans les futures versions de CSS, mais c'est loin.
mikl
Cette réponse est fausse. CSS3 a la propriété background-size qui est prise en charge dans IE9 +.
Downpour046
3
Jetez un œil à l'horodatage. En 2009, la taille de l'arrière-plan n'était qu'un scintillement aux yeux de WebKit. N'hésitez pas à le mettre à jour, si vous le souhaitez, mais il existe déjà de nombreuses autres réponses décrivant la taille de l'arrière-plan.
mikl
12
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;
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é.
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.
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;
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:
Une autre façon consiste à définir la taille du lien sur la taille de l'image d'arrière-plan. Dans la feuille de style, (sous # v2menu-home dans l'exemple ci-dessus), utilisez display: block et définissez-y la hauteur et la largeur. Cela fonctionne réellement. Pas besoin alors de caractères spatiaux insécables.
Martin Thompson
0
Par exemple: l'
image d'arrière - plan s'adaptera toujours à la taille du conteneur (largeur 100% et hauteur 100 px).
CSS inter-navigateurs:
Réponses:
CSS2
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) ...
CSS3 libère les pouvoirs
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+.
En particulier, j'aime les valeurs
cover
etcontain
qui nous donnent un nouveau pouvoir de contrôle que nous n'avions pas auparavant.Rond
Vous pouvez également utiliser ce
background-size: round
qui a un sens en combinaison avec la répétition: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.
la source
Seul CSS 3 prend en charge cela,
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.
la source
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.
la source
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
.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:ou peut-être
Le positionnement négatif est beaucoup utilisé avec les sprites CSS .
la source
Pas trop dur, si vous n'avez pas peur d'aller un peu plus en profondeur :)
Il y a un argument oublié :
Ce ne sera pas étirer votre
background-image
comme il le ferait aveccover
. 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-size
et-moz-background-size
.- Source: écoles W3
la source
À 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-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 certainement peu ou pas de perte de qualité.Voici un petit exemple:
(Remarque: cela fonctionne pour moi sous OS X 10.7 avec Firefox 8, Safari 5.1 et Chrome 16.0.912.63)
la source
taille d'arrière-plan: 200px 50px changez-le à 100% 100% et il s'adaptera aux besoins de la balise de contenu comme ul li ou div ... essayé
la source
Vous pouvez totalement avec CSS3:
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/
la source
Il suffit d'avoir des divisions imbriquées pour être compatible avec tous les navigateurs
la source
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.
la source
Vous ne pouvez pas définir la taille de votre image d'arrière-plan avec la version actuelle de CSS (2.1).
Vous ne pouvez définir:
position
,fix
,image-url
,repeat-mode
etcolor
.la source
la source
Vous avez écrit
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
combiné au code que vous avez écrit ci-dessus, vous pourrez voir le fichier bg.gif.
la source
background-size
fonctionne dans Chrome 4.1, mais jusqu'à présent, je ne pouvais pas le faire fonctionner dans Firefox 3.6.la source
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:
Dans le document HTML:
la source
Par exemple: l'
image d'arrière - plan s'adaptera toujours à la taille du conteneur (largeur 100% et hauteur 100 px).
CSS inter-navigateurs:
}
la source
C'est possible de faire en CSS3 avec la taille d'arrière-plan
la source
Si vous souhaitez définir
background-size
la mêmebackground
propriété, vous pouvez utiliser:la source