सीएसएस: पूर्ण आकार पृष्ठभूमि छवि

Question

साथ पूर्ण आकार पृष्ठभूमि छवि प्राप्त करने के लिए कोशिश कर रहा है:

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

यह सही चौड़ाई लेकिन ऊंचाई के साथ पृष्ठभूमि छवि दिखा रहा है फैला हो जाता है। मैं

html { 
background:url('../img/bg.jpg') no-repeat center center fixed; 
background-size: 100% auto; 
-webkit-background-size: 100% auto; 
-moz-background-size: 100% auto; 
-o-background-size: 100% auto; 

}

height: 100%

निकालना जैसे विभिन्न विकल्पों की कोशिश की लेकिन उनमें से कोई भी काम किया।

Answer 1

आपकी स्क्रीन स्पष्ट रूप से अपनी छवि के लिए एक अलग आकार है। यह असामान्य नहीं है, और आपको हमेशा इस मामले को पूरा करना चाहिए, भले ही आपकी स्क्रीन एक ही आकार (पहलू अनुपात) हो, क्योंकि अन्य लोगों की स्क्रीन हमेशा नहीं होगी। इससे निपटने के लिए, आपके पास केवल तीन विकल्पों में से एक है:

• आप अपनी छवि के साथ स्क्रीन को पूरी तरह से कवर करना चुन सकते हैं, लेकिन छवि को विकृत नहीं कर सकते हैं। इस मामले में, आपको इस तथ्य से निपटने की आवश्यकता होगी कि आपकी छवि के किनारे काट दिया जाएगा। इस मामले के लिए, उपयोग करें: background-size: cover
• आप यह सुनिश्चित करना चुन सकते हैं कि पूरी छवि दिखाई दे रही है, और विकृत नहीं है। इस मामले में, आपको इस तथ्य से निपटने की आवश्यकता होगी कि कुछ पृष्ठभूमि आपकी छवि द्वारा कवर नहीं की जाएगी। इससे निपटने का सबसे अच्छा तरीका पृष्ठ को एक ठोस पृष्ठभूमि देना है, और अपनी छवि को ठोस में फीका करने के लिए डिज़ाइन करना है (हालांकि यह हमेशा संभव नहीं होता है)। इस मामले के लिए, उपयोग करें: background-size: contain
• आप अपनी पृष्ठभूमि के साथ पूरी स्क्रीन को कवर करना चुन सकते हैं, और इसे फिट करने के लिए विकृत कर सकते हैं। इस मामले के लिए, का उपयोग करें: background-size: 100% 100%

Answer 2

कोशिश कवर के बजाय शामिल साथ और फिर इसे केंद्र:

background-size: contain; 
background-position: center; 

Answer 3

एक बेहतर समाधान गतिशील ब्राउज़र साइट के लिए पृष्ठभूमि आकार करने के लिए एक हल्के jQuery प्लगइन का उपयोग करने के लिए हो सकता है। मुझे वास्तव में पसंद है backstretch.js। वे लागू करने के लिए अविश्वसनीय रूप से सरल हैं।

Answer 4

आपको शरीर को चयनकर्ता के रूप में उपयोग करना चाहिए, न कि एचटीएमएल, इससे आपके मार्कअप के साथ समस्याएं पैदा हो जाएंगी। आपका कोड के नीचे है: आप छवि के लिए आयाम निर्दिष्ट करने के लिए नहीं होना चाहिए

body { 
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed; 
    margin: 0 auto; 
} 

:

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

मैं की तरह कुछ की कोशिश करेंगे।

Answer 5

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 6

मैं एक ही समस्या मैं body

background: url(image.jpg); 
    background-color: rgba(0, 0, 0, 0); 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
background-color: #0a769d; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
width: 100%; 
background-size: 100% 100%; 
background-position: center; 
max-width: 100%; 
min-width: 100%; 
top: 0; 
left: 0; 
padding: 0; 
margin: 0;