मेरे पृष्ठ में 2-3 अनुभाग हैं जिनमें 100% चौड़ाई और पृष्ठभूमि है। जब मैं इसे पूर्ण स्क्रीन पर खोलता हूं तो सबकुछ ठीक है, लेकिन जब स्क्रीन 960px से कम है (इस खंड में सामग्री की चौड़ाई) पृष्ठभूमि छवि संपूर्ण पृष्ठ नहीं है। पिछली तरफ जो छिपा हुआ है, वह पृष्ठभूमि नहीं है - यह सफेद है। आप देख सकते हैं कि मेरा क्या मतलब है: http://micobg.net/10th/सीएसएस: 100% चौड़ाई और पृष्ठभूमि?
9
A
उत्तर
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;
}
संबंधित मुद्दे
- 1. सीएसएस: छवि को 100% चौड़ाई
- 2. सीएसएस 100% चौड़ाई div पैरेंट
- 3. सीएसएस स्केल करें 100% चौड़ाई
- 4. सीएसएस 100% चौड़ाई प्रति 20px
- 5. सीएसएस 100% चौड़ाई लेकिन स्क्रॉलबार से बचें
- 6. सीएसएस गतिशील चौड़ाई 100% से अधिक
- 7. सीएसएस - 100% चौड़ाई पर इनपुट div
- 8. चौड़ाई: स्थिति के साथ 100%: निरपेक्ष (सीएसएस)
- 9. बॉक्स-छाया और 100% द्रव चौड़ाई अंक
- 10. सीएसएस पृष्ठभूमि छवि आकार चौड़ाई फसल ऊंचाई
- 11. सीएसएस 100% ऊंचाई div
- 12. एक लिंक बनाएं 100% चौड़ाई
- 13. पूर्ण-चौड़ाई Google मानचित्र और सीएसएस
- 14. तालिका तालिका चौड़ाई = 100%
- 15. div की 100% चौड़ाई
- 16. एचटीएमएल चौड़ाई 100%
- 17. 100% चौड़ाई HTML तत्व समस्या
- 18. सीएसएस: पूर्ण आकार पृष्ठभूमि छवि
- 19. केंद्र डिव (100% चौड़ाई) div
- 20. सीएसएस - अधिकतम चौड़ाई और एलिप्स
- 21. jquery UI टैब चौड़ाई 100%
- 22. Flexslider 100% चौड़ाई क्षैतिज स्क्रॉल बार
- 23. 100% चौड़ाई पर टेक्स्टरेरा कैसे रखें और इसका मार्जिन रखें?
- 24. सीएसएस चौड़ाई
- 25. सीएसएस फ्लोट न्यूनतम चौड़ाई और मार्जिन
- 26. सीएसएस डिवी 100% ऊंचाई
- 27. सीएसएस - 100% + पैडिंग?
- 28. 100% चौड़ाई के बिना प्रदर्शन ब्लॉक
- 29. सीएसएस: प्रतिशत और सीमाओं में चौड़ाई
- 30. एचटीएमएल और सीएसएस पृष्ठभूमि-छवि
इस पढ़ें: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – diEcho
आप कर सकते हैं [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling] में उपयोगी जानकारी पाएं (http://stackoverflow.com/questions/2083831/css-background-image-does- न भरें-कब-स्क्रॉलिंग) – utsikko