Allungare e scalare lo sfondo CSS

C'è un modo per far sì che uno sfondo in CSS si allunghi o si ridimensioni per riempire il suo contenitore?

Non attualmente. Sarà disponibile in CSS 3, ma ci vorrà del tempo prima che sia implementato nella maggior parte dei browser.

Commentari (5)

In una parola: no. L'unico modo per allungare un'immagine è con il tag ``. Dovrai essere creativo;

Questo era vero nel 2008, quando la risposta è stata scritta. Oggi i browser moderni supportano background-size che risolve questo problema. Attenzione che IE8 non lo supporta.

Commentari (1)

Definire "tratto e scala"...

Se avete un formato bitmap, generalmente non è un granché (graficamente parlando) allungarlo e tirarlo. Puoi usare modelli ripetibili per dare l'illusione dello stesso effetto. Per esempio, se hai un gradiente che diventa più chiaro verso il fondo della pagina, allora dovresti usare un grafico largo un solo pixel e della stessa altezza del tuo contenitore (o preferibilmente più grande per tenere conto della scalatura) e poi piastrarlo su tutta la pagina. Allo stesso modo, se il gradiente attraversa la pagina, dovrebbe essere alto un pixel e più largo del tuo contenitore e ripetuto lungo la pagina.

Normalmente per dare l'illusione che si allunghi per riempire il contenitore quando il contenitore cresce o si restringe, si rende l'immagine più grande del contenitore. Qualsiasi sovrapposizione non verrebbe visualizzata al di fuori dei limiti del contenitore.

Se volete un effetto che si basa su qualcosa come una scatola con bordi curvi, allora attacchereste il lato sinistro della vostra scatola al lato sinistro del vostro contenitore con una sovrapposizione sufficiente che (entro certi limiti) non importa quanto grande sia il contenitore, non finisca mai lo sfondo e poi stratificate un'immagine del lato destro della scatola con bordi curvi e la posizionate sulla destra del contenitore. Così, mentre il contenitore si restringe o cresce, l'effetto scatola curva sembra restringersi o crescere con esso - in realtà non lo fa, ma dà l'illusione che sia quello che sta succedendo.

Per far sì che l'immagine si riduca e cresca davvero con il contenitore, dovresti usare qualche trucco di stratificazione per far sì che l'immagine sembri funzionare come uno sfondo e qualche javascript per ridimensionarla con il contenitore. Non c'è un modo attuale di farlo con i CSS...

Se stai usando la grafica vettoriale, sei fuori dal mio campo di competenza, temo.

Commentari (2)