Große Hintergrundbilder und Bildschirmgrößen

Question

Ich erstelle eine Website, die ein Bild verwenden wird, das ich nicht kacheln kann. Ich brauche dieses Bild, um den gesamten Hintergrundbildschirm abzudecken. Ich möchte jedoch, dass dies sowohl auf großen Monitoren als auch auf kleineren Monitoren funktioniert.

Soll ich ein großes Hintergrundbild erstellen und es mit background-size verkleinern oder mehrere Versionen desselben Bildes in verschiedenen Größen erstellen, dann wählen Sie mit CSS3 Media Queries aus, welches Bild angezeigt werden soll. Wenn ja, welche Breakpoints in der Bildschirmgröße sollte ich verwenden?

Answer 1

landete ich die Wahl fünf Breakpoint basiert auf Informationen von StatCounter:

Dies ist bis Dezember 2012

Basierend dieser Zahlen ab, meinen Tests und anderen zu sprechen I wähle die folgenden Optionen:

/*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%; 
} 

Dies sollte es in jedem Browser auf jedem Bildschirm strecken.

Ich würde nur die große auf allen von ihnen verwenden.

Answer 3

Sie können die background-size-Eigenschaft verwenden, die auf contain oder cover festgelegt ist. Dies funktioniert besonders gut für fotografische Hintergründe (im Gegensatz zu Mustern), bei denen Skalierungsartefakte nicht so offensichtlich sind.

Vergleichen Sie die beiden: contain vs cover

Denken Sie daran, über eine Ausweichregel für IE8 Einrichtung und unter (nur ein gestreckter Hintergrund sollte ausreichen).