Strække og skalere CSS-baggrund

Ikke i øjeblikket. Det vil være tilgængeligt i CSS 3, men det vil tage noget tid, før det er implementeret i de fleste browsere.

Med ét ord: nej. Den eneste måde at strække et billede på er med tagget ``. Du skal være kreativ.

Dette var tilfældet i 2008, da svaret blev skrevet. I dag understøtter moderne browsere background-size, som løser dette problem. Vær opmærksom på, at IE8 ikke understøtter det.

Definer "stræk og skala"...

Hvis du har et bitmap-format, er det generelt ikke godt (grafisk set) at strække og trække det rundt. Du kan bruge gentagelige mønstre for at give illusionen af den samme effekt. Hvis du f.eks. har en gradient, der bliver lysere mod bunden af siden, skal du bruge en grafik, der er en enkelt pixel bred og har samme højde som din container (eller helst større for at tage højde for skalering), og så fliser du den hen over siden. På samme måde, hvis gradienten gik på tværs af siden, ville den være én pixel høj og bredere end din container og gentages nedad på siden.

For at give illusionen af, at det strækker sig for at fylde containeren, når containeren vokser eller krymper, gør man normalt billedet større end containeren. Eventuelle overlapninger vil ikke blive vist uden for containerens grænser.

Hvis du ønsker en effekt, der er afhængig af noget som en kasse med buede kanter, skal du klæbe venstre side af din kasse til venstre side af din container med tilstrækkeligt overlap til, at den (inden for rimelighedens grænser) uanset hvor stor containeren er, aldrig løber tør for baggrund, og derefter lægger du et billede af højre side af kassen med buede kanter i et lag og placerer det til højre for containeren. Når containeren skrumper eller vokser, ser det således ud til, at den buede bokseeffekt skrumper eller vokser med den - det gør den faktisk ikke, men det giver illusionen om, at det er det, der sker.

Hvis man virkelig vil få billedet til at krympe og vokse sammen med containeren, skal man bruge nogle lagdeltricks for at få billedet til at virke som en baggrund og noget javascript til at ændre størrelsen på det sammen med containeren. Der er ingen nuværende måde at gøre det på med CSS...

Hvis du bruger vektorgrafik, er du desværre langt uden for mit ekspertiseområde, er jeg bange for.