Strekk og skaler CSS-bakgrunn

Foreløpig ikke. Det vil være tilgjengelig i CSS 3, men det vil ta litt tid før det er implementert i de fleste nettlesere.

Med ett ord: nei. Den eneste måten å strekke et bilde på er med ``-taggen. Du må være kreativ.

Dette pleide å være sant i 2008, da svaret ble skrevet. I dag støtter moderne nettlesere "background-size" som løser dette problemet. Vær oppmerksom på at IE8 ikke støtter det.

Definere "strekk og skala"...

Hvis du har et bitmap-format, er det vanligvis ikke bra (grafisk sett) å strekke det og trekke det rundt. Du kan bruke repeterbare mønstre for å gi illusjonen av den samme effekten. Hvis du for eksempel har en gradient som blir lysere mot bunnen av siden, vil du bruke en grafikk som er en enkelt piksel bred og samme høyde som beholderen din (eller helst større for å ta hensyn til skalering) og deretter flislegge den over siden. På samme måte, hvis gradienten gikk over hele siden, ville den være en piksel høy og bredere enn beholderen din og gjentas nedover siden.

Normalt for å gi en illusjon av at det strekker seg for å fylle beholderen når beholderen vokser eller krymper, gjør du bildet større enn beholderen. Eventuell overlapping vil ikke vises utenfor beholderens grenser.

Hvis du vil ha en effekt som er avhengig av noe som en boks med buede kanter, vil du feste venstre side av boksen til venstre side av beholderen din med nok overlapping til at (innen rimelighetens grenser) uansett hvor stor beholderen er, aldri går tom for bakgrunn, og deretter legger du et bilde av høyre side av boksen med buede kanter og plasserer det til høyre for beholderen. Dermed når beholderen krymper eller vokser, ser det ut til at den buede bokseffekten krymper eller vokser med den - det gjør det faktisk ikke, men det gir illusjonen om at det er det som skjer.

Når det gjelder å virkelig få bildet til å krympe og vokse med beholderen, må du bruke noen lagdelingstriks for å få bildet til å fungere som bakgrunn og litt javascript for å endre størrelsen på det med beholderen. Det er ingen nåværende måte å gjøre dette på med CSS ...

Hvis du bruker vektorgrafikk, er jeg redd du er langt utenfor min ekspertise.