Is er een manier om een achtergrond in CSS te laten uitrekken of schalen om zijn container te vullen?
In een woord: nee. De enige manier om een afbeelding uit te rekken is met de <img>
tag. Je zult creatief moeten zijn.
Dit was waar in 2008, toen het antwoord werd geschreven. Tegenwoordig ondersteunen moderne browsers background-size
wat dit probleem oplost. Pas op dat IE8's het niet ondersteunen.
Definieer "stretch en schaal"...
Als je'een bitmap formaat hebt, is het over het algemeen niet geweldig (grafisch gesproken) om het uit te rekken en te verschalen. Je kunt herhaalbare patronen gebruiken om de illusie van hetzelfde effect te geven. Als je bijvoorbeeld een kleurverloop hebt dat lichter wordt naar de onderkant van de pagina, dan zou je een grafiek gebruiken van één pixel breed en dezelfde hoogte als je container (of bij voorkeur groter om rekening te houden met het schalen) en die dan over de pagina heen tegelen. Op dezelfde manier, als het kleurverloop over de pagina loopt, zou het één pixel hoog en breder zijn dan je container en herhaald worden over de pagina.
Om de illusie te wekken dat het uitrekt om de container te vullen als de container groeit of krimpt, maak je de afbeelding groter dan de container. Overlappingen zouden niet buiten de container worden weergegeven.
Als je een effect wilt dat gebaseerd is op zoiets als een doos met gebogen randen, dan plak je de linkerkant van je doos aan de linkerkant van je container met genoeg overlapping dat (binnen de grenzen van het redelijke) hoe groot de container ook is, hij nooit zonder achtergrond komt te zitten en dan plak je een afbeelding van de rechterkant van de doos met gebogen randen en plaats je die aan de rechterkant van de container. Dus als de container krimpt of groeit, lijkt het gebogen box-effect mee te krimpen of te groeien - dat doet het in feite niet, maar het geeft de illusie dat dat is wat's gebeurt.
Om de afbeelding echt te laten krimpen en groeien met de container, zou je wat lagen-trucs moeten gebruiken om de afbeelding als achtergrond te laten lijken en wat javascript om de grootte ervan te veranderen met de container. Er is geen huidige manier om dit te doen met CSS...
Als je vectorafbeeldingen gebruikt, ben je ver buiten mijn expertisegebied, ben ik bang.