बड़ी पृष्ठभूमि छवियां और स्क्रीन आकार

Question

मैं ऐसी वेबसाइट तैयार कर रहा हूं जो उस छवि का उपयोग करने जा रहा है जिसे मैं टाइल नहीं कर सकता। मुझे पूरी पृष्ठभूमि स्क्रीन को कवर करने के लिए इस छवि की आवश्यकता है। हालांकि, मैं चाहता हूं कि यह बड़े मॉनीटर के साथ-साथ छोटे मॉनीटर पर काम करे।

क्या मुझे background-size का उपयोग करके एक बड़ी पृष्ठभूमि छवि बनाना चाहिए और इसे स्केल करना चाहिए या मुझे विभिन्न आकारों पर एक ही छवि के कई संस्करण बनाना चाहिए, तो यह चुनने के लिए कि कौन सी छवि दिखानी चाहिए, CSS3 मीडिया क्वेरीज़ का उपयोग करना चाहिए? यदि ऐसा है तो मुझे स्क्रीन आकार में किस ब्रेक पॉइंट का उपयोग करना चाहिए?

Answer 1

मैं पांच ब्रेकप्वाइंट StatCounter से जानकारी के आधार पर चुनने को समाप्त:

इस दिसंबर 2012

इन नंबरों, मेरे परीक्षण के आधार पर जब तक निर्भर है, और दूसरों से बात कर रहा निम्नलिखित विकल्पों का चयन किया:

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

यह प्रत्येक स्क्रीन में प्रत्येक ब्राउज़र में इसे फैला देना चाहिए।

मैं बस उन सभी पर बड़ा उपयोग करूँगा।

Answer 3

आप background-size संपत्ति का उपयोग contain या cover पर कर सकते हैं। यह फोटोग्राफिक पृष्ठभूमि (पैटर्न के विपरीत) के लिए विशेष रूप से अच्छी तरह से काम करता है जहां कलाकृतियों को स्केल करना स्पष्ट नहीं है।

दो की तुलना करें: contain बनाम cover

IE8 के लिए और के तहत (सिर्फ एक विस्तारित पृष्ठभूमि पर्याप्त होना चाहिए) फ़ालबैक शासन की स्थापना के बारे याद रखें।