एक पृष्ठभूमि छवि केंद्रित और 100% सेट करने के लिए सर्वोत्तम तरीका क्या है में 100% (इसलिए यह स्क्रीन भरता है, लेकिन अभी भी पहलू अनुपात को बरकरार रखे हुए है कि) सभी ब्राउज़रों में?पृष्ठभूमि छवि केंद्रित और सभी ब्राउज़रों
एक पुराने पोस्ट प्राप्त करें, के बाद से वहाँ अच्छा ब्राउज़र समर्थन के साथ यह करने के लिए एक नया तरीका है।
इस तरह का प्रयोग करें background-image:
background-size:cover;
background-position:center;
इस छवि का अनुपात को नष्ट नहीं होगा, लेकिन के रूप में सबसे अच्छा के रूप में संभव कभी नहीं किसी भी काले बार दिखा (या कभी क्या पृष्ठभूमि में हो जाएगा) यह पैमाने।
ब्राउज़र समर्थन के रूप में आप Can I use it? पर देख सकते हैं लगभग एकदम सही है। ओपेरा मिनी एक मुद्दा हो सकता है, लेकिन ब्राउजर को जल्द ही विवाल्डी द्वारा प्रतिस्थापित किया जाएगा।
निष्कर्ष में मुझे लगता है कि यह निश्चित रूप से जाने का तरीका है, क्योंकि यह अब तक का सबसे साफ और सबसे विश्वसनीय समाधान है और जेएस के साथ भी संपादित करना बहुत आसान है।
पुराना धागा अपडेट करने के लिए धन्यवाद। इस तरह मैं आज भी ऐसा करता हूं। – jamietelin
मुझे नहीं पता कि इसे पृष्ठभूमि छवि के रूप में सेट करके इसे कैसे प्राप्त किया जाए। आप एक छवि है कि पूरी तरह से स्थिति में है
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
'प्रदर्शन: तालिका;' के लिए क्या है? कार्य करने के लिए लंबवत-संरेखण के लिए – ANeves
। यह भी प्रदर्शित किया जा सकता है: टेबल-सेल – Kasturi
मुझे नहीं लगता कि आपको काम करने के लिए लंबवत-संरेखण के लिए इसकी आवश्यकता है, लंबवत-संरेखण किसी भी इनलाइन-तत्व पर काम करना चाहिए: http://www.htmldog.com/reference/ cssproperties/लंबवत-संरेखण/ – ANeves
हो सकता था लेकिन आप CSS3 background-size property इस्तेमाल कर सकते हैं, लेकिन मुझे यकीन है कि यह कैसे अच्छी तरह से समर्थित है नहीं कर रहा हूँ। मुझे लगता है कि उनमें से ज्यादातर है, लेकिन उपसर्ग के साथ:
-o-background-size
-webkit-background-size
-khtml-background-size
सबसे अच्छा अभ्यास है कि आप क्या करना चाहते करने के लिए नहीं है।
100% निर्दिष्ट करके आप छवि को खींचने (इस प्रकार विकृत) करने जा रहे हैं।
एक सरल, केंद्रित पृष्ठभूमि के लिए सबसे अच्छा तरीका है इस तरह है:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
संपादित करें:
अब आप विभिन्न प्रस्तावों को लक्षित और एक अलग पृष्ठभूमि छवि का उपयोग कर सकते हैं आकार के आधार पर एक संकल्प-निर्भर स्टाइलशीट निर्दिष्ट करके। आप प्रत्येक में अलग-अलग फ़ाइलों के साथ एक पृष्ठभूमि तत्व को परिभाषित करने के लिए अलग स्टाइलशीट का उपयोग कर सकते हैं।
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
देखें: http://css-tricks.com/resolution-specific-stylesheets/
इस समाधान के साथ समस्या यह है कि मुझे विभिन्न संकल्प के साथ कई, कई छवियां बनाने की आवश्यकता है। – jamietelin
यह दो तरीकों पर एक उत्कृष्ट पोस्ट इस देखो को प्राप्त करने के लिए है:
मैंने तकनीक # 2 का एक संशोधित संस्करण किया, काम की तरह ओकी, प्रश्न का अपना जवाब जांचें। – jamietelin
बेस्ट समाधान मैं अब तक इस प्रकार है बनाने में कामयाब रहे;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
क्या यह सबसे अच्छा तरीका हो सकता है? किसी को भी इस तरह से करने में कोई समस्या है?
आपके समय के लिए धन्यवाद!
"सभी ब्राउज़र्स" क्या हैं? क्या इसमें आईई 6 शामिल है? (अपने स्वयं के लिए, यह बेहतर नहीं है।) – ANeves
नहीं, लेकिन सभी ब्राउज़र अद्यतित हैं :) तो, आईई 8, फ़ायरफ़ॉक्स 3, सफारी 4 और इतने पर ... और सब कुछ मेरा मतलब है कि सभी प्रमुख ब्राउज़र कैमिनो, मिरो और शीघ्र। – jamietelin