Solo CSS 3 soporta eso,

background-size: 200px 50px;

Pero editaría la imagen en sí, para que el usuario necesite cargar menos, y podría verse mejor que una imagen reducida sin antialiasing.

Si sus usuarios solo usan Opera 9.5+, Safari 3+, Internet Explorer 9+ y Firefox 3.6+, entonces la respuesta es sí. De lo contrario, no.

La propiedad background-size es parte de CSS 3, pero no funcionará en la mayoría de los navegadores.

Para tus propósitos solo haz la imagen real más grande.

No es posible. El fondo siempre será tan grande como pueda ser, pero puede evitar que se repita con background-repeat.

background-repeat: no-repeat;

En segundo lugar, el fondo no entra en el área de margen de una caja, por lo que si desea que el fondo solo esté en el contenido real de una caja, puede usar margen en lugar de relleno.

En tercer lugar, puede controlar dónde comienza la imagen de fondo. De forma predeterminada, es la esquina superior izquierda de un cuadro, pero puede controlarlo con background-position, así:

background-position: center top;

O tal vez

background-position: 20px -14px;

El posicionamiento negativo se usa mucho con sprites CSS.

No demasiado duro, si no tienes miedo de ir un poco más en profundidad:)

Hay un argumento olvidado:

background-size: contain;

Esto no estirará su background-image como lo haría con cover. Se estiraría hasta que el lado más largo alcance el ancho o la altura del contenedor exterior y, por lo tanto, preserve la imagen.

Editar: También hay -webkit-background-size y -moz-background-size.

La propiedad background-size es compatible con IE9+, Firefox 4+, Opera, Chrome y Safari 5+.

^{- Fuente: W3 Escuelas}

Tamaño del fondo: 200px 50px cámbialo a 100% 100% y escalará según las necesidades de la etiqueta de contenido como ul li o div... lo probé

Usted puede totalmente con 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;
 }

Esto dimensionará una imagen de fondo al 100% del ancho del elemento body y luego redimensionará el fondo en consecuencia a medida que el elemento body redimensiona para resoluciones más pequeñas.

Aquí está el ejemplo: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

Solo tienen divs anidados para ser compatibles con el navegador cruzado

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

En apoyo de la respuesta que @tetra dio, quiero señalar que si la imagen es un SVG, entonces no es necesario cambiar el tamaño de la imagen real.

Dado que un archivo SVG es solo XML, puede especificar el tamaño que desee que aparezca dentro del XML.

Sin embargo, si está utilizando la misma imagen SVG en diferentes lugares y necesita que tenga diferentes tamaños, entonces usar background-size es muy útil. Los archivos SVG son inherentemente más pequeños que las imágenes rasterizadas de todos modos y cambiar el tamaño sobre la marcha con CSS puede ser muy útil sin ningún costo de rendimiento que soy consciente de, y ciertamente poca o ninguna pérdida de calidad.

Aquí hay un ejemplo rápido:

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

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

(Nota: esto funciona para mí en OS X 10.7 con Firefox 8, Safari 5.1 y Chrome 16.0.912.63)

Puedes usar dos elementos <div>:

• Uno es un contenedor (es el que originalmente quería el imagen de fondo para aparecer en).

• El segundo está contenido dentro. Se establece su tamaño en el tamaño de la imagen de fondo (o el tamaño que desea que aparezca).

El div contenido se establece entonces para ser posicionado absolute. De esta manera no interfiere con el flujo normal de elementos en el div que contiene.

Le permite utilice las imágenes de sprite de manera eficiente.

No se puede establecer el tamaño de la imagen de fondo con la versión actual de CSS (2.1).

Solo se puede configurar: position, fix, image-url, repeat-mode, y 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;

Has escrito

background: url('bg.gif') top repeat-y;    
background-size: 490px;

Pero solo verá el fondo dependiendo del tamaño del contenedor.

Si tiene un contenedor vacío con la url de fondo y cualquiera que sea el tamaño de fondo, no verá el bg.gif.

Si establece el tamaño del continer en

background: url('bg.gif') top repeat-y;    
background-size: 490px;
height: 490px;
width: 490px;

Combinado con el código que escribiste arriba, podrás ver el bg.archivo gif.

Si desea establecer background-size en la misma propiedad background puede usar use:

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

background-size está funcionando en Chrome 4.1, pero hasta ahora no pude hacer que funcione en Firefox 3.6.

Utilizo imágenes de fondo para los botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si establezco ancho y alto. En su lugar, relleno mi texto con caracteres   (espacios que no se rompen). Abofeteo en tantos como sea necesario, básicamente, hasta que todo el fondo del botón aparece. Así que podría tener un código como este:

En la hoja de estilo:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

En el documento 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 -->

Por ejemplo:
La imagen de fondo siempre se ajustará al tamaño del contenedor (ancho 100% y altura 100px).
CSS entre navegadores:

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

}

Esto es posible hacer en CSS3 con background-size

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