In quel sito non ci sono immagini di sfondo. Solo alcune fasce hanno un colore di sfondo.

Le "fasce" sono dei <div> che probabilmente sono a larghezza intera (width:100%) e altezza sufficiente per contenere le cose all'interno.

Le sfumature si ottengono facendo ripetere un'immagine opportuna.
Ad esempio se devi fare una fascia rossa e poi una sfumatura continua alta 30px, devi:
1. fare un <div> con colore di sfondo rosso
2. nel <div> successivo ci metti un'immagine di sfondo ripetuta in orizzontale. L'immagine dovra` essere alta 30px e larga 1 px (o anche 10 px, se vuoi poterla vedere senza romperti gli occhi), posizionata in alto nel blocco. Lo stesso blocco potrebbe aver necessita` di un padding di 30 px in modo che il contenuto nonvada a sovrapporsi alla sfumatura.
Tale immagine dovra` essere realizzata con un programma di grafica e dovra` avere la sfumatura in verticale da rosso a bianco (se il colore di sfondo del blocco successivo e` bianco).

Per i dettagli di come realizzare le immagini sfumate, ti consiglio di chiedere nel forum grafica.

Per come sistemare i vari blocchi, sei nel posto giusto, ma se vuoi aiuto devi essere piu` preciso (magari posta uno schema grafico di come vorresti il layout).