I device che visualizzano un sito possono essere di diverse dimensioni passando da uno smartphone a 7 pollici a un televisore da 50 pollici. Avere un'immagine di background diversa per ogni possibile dimensione dello schermo è una soluzione efficace, ma poco manutenibile in virtù dell'elevato numero di combinazioni possibili.

Un modo per gestire le diverse dimensioni è creare un'immagine che il browser può ridimensionare a run time in base alle dimensioni. Per fare questo, possiamo utilizzare la proprietà background-size di CSS3. Impostando questa proprietà su cover diciamo al browser di adattare l'immagine alle dimensioni dello schermo (mantenendo sempre le proporzioni), finchè l'intera area non è coperta.

body {
  background-size: cover;
  background: url(images/bg.png);
}

Se la finestra del browser è inferiore alle dimensioni dell'immagine, l'immagine viene tagliata e solo la parte che copre il browser viene mostrata. Se invece riadattando l'immagine alle dimensioni del browser non si dovesse coprire l'intero browser, allora l'immagine viene replicata.