Immagini di sfondo di grandi dimensioni e dimensioni dello schermo

Question

Sto creando un sito Web che sta per utilizzare un'immagine che non posso affiancare. Ho bisogno di questa immagine per coprire l'intera schermata di sfondo. Tuttavia, voglio che funzioni su monitor di grandi dimensioni e monitor più piccoli.

Devo creare un'immagine di sfondo grande e ridimensionarla usando background-size o dovrei creare più versioni della stessa immagine in varie dimensioni, quindi utilizzare le query multimediali CSS3 per scegliere quale immagine deve essere visualizzata? In caso affermativo, quali sono i punti di rottura delle dimensioni dello schermo?

Answer 1

ho finito per scegliere cinque punto di interruzione sulla base di informazioni provenienti da StatCounter:

Questo è fino a dicembre 2012.

base al largo di questi numeri, la mia prova, e parlando con altri che ha scelto le seguenti opzioni:

/*Monitors Large than 1920px, image has "soft" edges to blend into background */ 
@media (min-width:1921px){ 
    html, body{ 
background: url(/images/backgrounds/1920-bg-large.jpg) no-repeat center top fixed #190303; 
background-size:100% auto; 
    } 
} 

/* Mointores ranging from 1367px - 1920px */ 
@media (min-width:1367px) and (max-width:1920px){ 
html, body{ 
background: url(/images/backgrounds/1920-bg.jpg) no-repeat center top fixed #190303; 
background-size:100% auto; 
    } 
} 

/* Mointores ranging from 769px - 1366px */ 
@media (min-width:769px) and (max-width:1366px){ 
html, body{ 
background: url(/images/backgrounds/1366-bg.jpg) no-repeat center top fixed #190303; 
background-size:100% auto; 
    } 
} 
/* Tablets like the iPad 2 and iPad Mini */ 
@media (max-width:768px){ 
html, body{ 
background: url(/images/backgrounds/768-bg.jpg) no-repeat center top fixed #190303; 
background-size:100% auto; 
    } 
} 

/* At a certain point the Background images become irrelevant as they are hidden behind other elements. Changed to a solid BG */ 
@media handheld, only screen and (max-width: 640px) { 
html, body{ 
background:#190303; 
    } 
} 

Answer 2

body 
{ 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-size:100% 100%; 
} 

Questo dovrebbe estendersi in ogni browser in ogni schermata.

Vorrei solo usare quello grande su tutti loro.

Answer 3

È possibile utilizzare la proprietà background-size impostata su contain o cover. Questo funziona particolarmente bene per gli sfondi fotografici (al contrario dei pattern) in cui i artefatti di ridimensionamento non sono così ovvi.

confrontare le due: contain vs cover

Ricordate sulla configurazione di una regola di ripiego per IE8 e sotto (solo uno sfondo allungata dovrebbe essere sufficiente).