Seulement CSS 3 soutient que,

background-size: 200px 50px;

mais je voudrais éditer l'image elle-même, de sorte que l'utilisateur doit charger moins, et il pourrait 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+, alors la réponse est oui. Sinon, pas de.

la propriété background-size fait partie de CSS 3, mais elle ne fonctionnera pas sur la plupart des navigateurs.

pour vos besoins, agrandissez l'image actuelle.

impossible . Le fond sera toujours aussi grand qu'il peut l'être, mais vous pouvez l'empêcher de se répéter avec background-repeat .

background-repeat: no-repeat;

deuxièmement, le fond n'entre pas dans la zone de marge d'une boîte, donc si vous voulez que le fond soit seulement sur le contenu réel d'une boîte, vous pouvez utiliser la marge au lieu du rembourrage.

Troisièmement, vous pouvez contrôler où l'arrière-plan image commence. Par défaut, c'est le coin supérieur gauche de la boîte, mais vous pouvez contrôler qu'avec background-position , comme ceci:

background-position: center top;

ou peut-être

background-position: 20px -14px;

positionnement négatif est utilisé beaucoup avec CSS sprites .

Pas trop dur, si vous n'avez pas peur d'aller un peu plus en profondeur :)

Il y a un oublié argument:

background-size: contain;

ça n'étire pas votre background-image comme avec cover . Elle s'étendrait jusqu'à ce que le côté le plus long atteigne la largeur ou la hauteur du contenant extérieur et préserverait ainsi l'image.

Edit: il y a aussi -webkit-background-size et -moz-background-size .

la propriété background-size est supportée dans IE9+, Firefox 4+, Opera, Chrome et Safari 5+.

^{- Source: W3 Écoles}

background-size: 200px 50px changez-le à 100% 100% et il se basera sur les besoins de l'étiquette de contenu comme ul li ou div... essayé

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;
 }

ceci va dimensionner une image de fond à 100% de la largeur de l'élément de corps et va ensuite redimensionner l'arrière-plan en conséquence que l'élément de corps redimensionne pour des résolutions plus petites.

Voici l'exemple: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css /

Juste divs imbriqués à la croix-navigateur compatible

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   

à l'appui de la réponse que @tetra a donnée, je tiens à souligner que si l'image est un SVG, alors redimensionner l'image réelle n'est pas nécessaire.

étant donné qu'un fichier SVG n'est QU'un fichier XML, vous pouvez spécifier quelle taille vous voulez qu'il apparaisse dans le XML.

cependant, si vous utilisez la même image SVG à des endroits différents et que vous avez besoin de tailles différentes, alors utiliser background-size est très utile. Les fichiers SVG sont intrinsèquement plus petits que raster les images en tout cas et le redimensionnement à la volée avec CSS peuvent être très utiles sans aucun coût de performance dont je suis conscient, et certainement peu ou pas de perte de qualité.

voici un exemple rapide:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(Note: cela fonctionne pour moi dans OS X 10.7 avec Firefox 8, Safari 5.1, et Chrome 16.0.912.63)

vous pouvez utiliser deux <div> éléments:

• L'un est un conteneur (il est celui que vous vouliez à l'origine le image d'arrière-plan à paraître).

• le second est contenu dans. Vous réglez sa taille à la taille de l'image d'arrière-plan (ou la taille que vous souhaitez apparaître).

Le contenu de la div est alors configuré pour être positionné absolute . De cette façon, il n'interfère pas avec le flux normal des articles dans le div contenant.

il vous permet d'utiliser les images sprite efficacement.

vous ne pouvez pas définir la taille de votre image de fond avec la version actuelle de CSS (2.1).

Vous ne pouvez définir: position , fix , image-url , repeat-mode , et color .

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 que selon 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 continer à

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 bg.fichier gif.

si vous voulez définir background-size dans le même background propriété, vous pouvez utiliser Utiliser:

background:url(my-bg.png) no-repeat top center / 50px 50px;

background-size fonctionne dans Chrome 4.1, mais jusqu'à présent je n'ai pas pu le faire fonctionner dans Firefox 3.6.

j'utilise des images d'arrière-plan pour les boutons, mais il montre seulement l'image de la même taille que le texte, même si je mets la largeur et la hauteur. Au lieu de cela, je rembourre mon texte avec des caractères   (espaces non-cassants). Je gifle autant que nécessaire, en gros, jusqu'à ce que tout le fond du bouton apparaisse. Donc je pourrais avoir le code comme ceci:

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

par exemple:

L'image de fond sera toujours adaptée à la taille du conteneur (largeur 100% et hauteur 100px).

Cross-browser CSS:

.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;

}

cela est possible en CSS3 avec background-size

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}