2012-08-23 20 views
9

मेरे पृष्ठ में 2-3 अनुभाग हैं जिनमें 100% चौड़ाई और पृष्ठभूमि है। जब मैं इसे पूर्ण स्क्रीन पर खोलता हूं तो सबकुछ ठीक है, लेकिन जब स्क्रीन 960px से कम है (इस खंड में सामग्री की चौड़ाई) पृष्ठभूमि छवि संपूर्ण पृष्ठ नहीं है। पिछली तरफ जो छिपा हुआ है, वह पृष्ठभूमि नहीं है - यह सफेद है। आप देख सकते हैं कि मेरा क्या मतलब है: http://micobg.net/10th/सीएसएस: 100% चौड़ाई और पृष्ठभूमि?

+1

इस पढ़ें: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – diEcho

+1

आप कर सकते हैं [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling] में उपयोगी जानकारी पाएं (http://stackoverflow.com/questions/2083831/css-background-image-does- न भरें-कब-स्क्रॉलिंग) – utsikko

उत्तर

2

पृष्ठभूमि न्यूनतम चौड़ाई का उपयोग करें: 960px; चौड़ाई के बजाय: 100%; चीयर्स

18

बस background-size:100% शैली को उस तत्व में जोड़ें जहां आपने background-image लागू किया था। फ़ायरफ़ॉक्स, सफारी और ओपेरा में काम करता है। उदाहरण के लिए:

<style> 
.divWithBgImage { 
    width: 100%; 
    height: 600px; 
    background-image: url(image.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; //propotional resize 
/* 
    background-size: 100% 100%; //stretch resize 
*/ 
} 
</style> 
<div class="divWithBgImage"> 
    some contents 
</div> 
+0

अब यह क्रोम में भी काम करता है – Channel

3

this लेख के बारे में, आप cover रूप में अच्छी तरह उपयोग करने के लिए करना चाहिए:

html { 
    background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
संबंधित मुद्दे