CSS può far finire lo sfondo sul bordo della tessera

Un motivo ripetuto sullo sfondo, tagliato a metà sul fondo della sezione, è uno di quei dettagli che poi si continuano a vedere. background-repeat: round lo risolve adattando le tessere allo spazio disponibile, ma le ingrandisce o le rimpicciolisce. Ahmad Shadeed propone di cambiare lo spazio, lasciando stare il disegno.

Con calc-size() parte dall’altezza automatica richiesta dal contenuto. La funzione round() la arrotonda poi a un multiplo dell’altezza della tessera: il bordo della sezione cade così dove finisce il motivo. Arrotondando verso l’alto si aggiunge spazio senza avvicinare troppo il testo al bordo; anche il padding può seguire lo stesso ritmo.

È una soluzione particolarmente soddisfacente perché il contenitore continua ad adattarsi al testo. Il limite attuale è calc-size(), disponibile nei browser Chromium ma non ancora in Firefox e Safari: si può aggiungere dove funziona, mantenendo negli altri browser il normale sfondo ripetuto.