¿Hay alguna manera de conseguir que un fondo en CSS se estire o escale para llenar su contenedor?
En una palabra: no. La única forma de estirar una imagen es con la etiqueta <img>
. Tendrás que ser creativo.
Esto era cierto en 2008, cuando se escribió la respuesta. Hoy en día los navegadores modernos soportan background-size
que resuelve este problema. Ten en cuenta que IE8 no lo soporta.
Define "estirar y escalar"...
Si tienes un formato de mapa de bits, por lo general no es muy bueno (gráficamente hablando) estirarlo y desplazarlo. Puedes utilizar patrones repetibles para dar la ilusión del mismo efecto. Por ejemplo, si tienes un degradado que se vuelve más claro hacia la parte inferior de la página, entonces utilizarías un gráfico de un solo píxel de ancho y de la misma altura que tu contenedor (o preferiblemente más grande para tener en cuenta la escala) y luego lo distribuirías por la página. Del mismo modo, si el gradiente se extiende a lo largo de la página, sería de un píxel de alto y más ancho que el contenedor y se repetiría a lo largo de la página.
Normalmente, para dar la ilusión de que se estira para llenar el contenedor cuando éste crece o se encoge, se hace la imagen más grande que el contenedor. Cualquier superposición no se mostraría fuera de los límites del contenedor.
Si quieres un efecto que se base en algo como una caja con bordes curvos, entonces pegarías el lado izquierdo de tu caja al lado izquierdo de tu contenedor con suficiente solapamiento para que (dentro de lo razonable) no importa lo grande que sea el contenedor, nunca se quede sin fondo y luego pones en capas una imagen del lado derecho de la caja con bordes curvos y la colocas a la derecha del contenedor. Así, a medida que el contenedor se encoge o crece, el efecto de caja curvada parece encogerse o crecer con él; en realidad no lo hace, pero da la ilusión de que eso es lo que ocurre.
En cuanto a hacer que la imagen se encoja y crezca con el contenedor, tendrías que usar algunos trucos de estratificación para hacer que la imagen parezca funcionar como un fondo y algo de javascript para cambiar su tamaño con el contenedor. No hay ninguna forma actual de hacer esto con CSS...
Si estás usando gráficos vectoriales, me temo que estás fuera de mi ámbito de experiencia.