पृष्ठभूमि छवि पूर्ण पृष्ठ चौड़ाई नहीं बढ़ाती

this page पर, मेरे पास 2-स्वर पृष्ठभूमि है। पेज की संरचना है:पृष्ठभूमि छवि पूर्ण पृष्ठ चौड़ाई नहीं बढ़ाती

<body> 
    <div id="upbg"/> 
    <div id="container"/> 
</body

इस पृष्ठभूमि upbg को एक अंधेरे पृष्ठभूमि छवि और शरीर पर एक लाइटर पृष्ठभूमि छवि जोड़कर हासिल की है। upbg के लिए सीएसएस है:

#upbg { 
    background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; 
    height: 275px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

आप ब्राउज़र विंडो बहुत ही संकीर्ण ऐसी है कि स्क्रॉलबार प्रकट कर, तो अगर आप सही करने के लिए भर में स्क्रॉल आप ध्यान देंगे कि upbg की पृष्ठभूमि छवि पूरे भर नहीं पृष्ठ की चौड़ाई।

मेरा अनुमान है कि ऐसा इसलिए है क्योंकि 'चौड़ाई: 100%' का मतलब पृष्ठ की पूरी चौड़ाई की बजाय ब्राउज़र विंडो की चौड़ाई है, क्या इसे ठीक करने का कोई तरीका है?

धन्यवाद, डॉन

स्रोत

2009-03-14 Dónal

मेरा अनुमान है कि इस वजह से 'चौड़ाई: 100%' है ब्राउज़र विंडो की चौड़ाई का मतलब है, न कि पेज की पूरी चौड़ाई से, वहाँ एक है के लिए रास्ता तय करें?

100% मतलब है कि यह के रूप में व्यापक पेरेंट तत्व इसे करने के लिए (इस मामले, body में है, जो की चौड़ाई अपनी मूल, html की चौड़ाई के आधार पर किया जाएगा) किस स्थिति में है के रूप में हो जाएगा। जो ब्राउज़र विंडो के रूप में चौड़ा होगा, जब तक कि आप अन्यथा निर्दिष्ट न करें।

समस्या है, तो आप body का एक और बच्चा जो body से अधिक व्यापक हो सकता है: दोनों #container और #footer इस तरह के स्टाइल है कि वे हमेशा कम से कम 1026px विस्तृत हो जाएगा रहे हैं। यह उनके मूल तत्वों को विस्तृत नहीं करता है, क्योंकि हमने पहले ही स्थापित कर लिया है कि वे ब्राउज़र विंडो के रूप में चौड़े होंगे; इसके बजाय, वे ओवरफ्लो उनके माता-पिता। इसके लिए डिफ़ॉल्ट प्रतिक्रिया स्क्रॉलबार प्रदर्शित करना है ताकि आप बहती हुई सामग्री को स्क्रॉल और देख सकें; यदि आपने overflow:hidden से html या body शैली जोड़ा है, तो आपको अपनी सामग्री और पाद लेख ब्राउज़र विंडो के आकार पर फिसल जाएगा, और कोई स्क्रॉलबार प्रदर्शित नहीं होगा।

लपेटें #content और #upbg में #footer बजाय उन्हें इसके साथ पूर्ववर्ती:

वहाँ आसान समाधान के एक जोड़े यह कर रहे हैं। फिर मौजूदा शैलियों को हटाएं, और इसे निम्नानुसार स्टाइल करें: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; यह दो चीजों को पूरा करता है: अब आप #upbg के लिए चौड़ाई निर्दिष्ट नहीं कर रहे हैं, इस प्रकार यह अपने नए बच्चों को घेरने के लिए पर्याप्त व्यापक हो सकता है, और यह आपको छुटकारा पाने की अनुमति देता है अब बहुत अनावश्यक स्टाइल (आप body के लिए सेट किए गए पैडिंग को साफ़ करना चाहते हैं, साथ ही #content पर कुछ शैली के साथ)। वैकल्पिक रूप से,
#content और #footer पर न्यूनतम चौड़ाई से छुटकारा पाएं, इसलिए वे अधिक प्रवाह नहीं करते हैं।

स्रोत

2009-03-14 03:55:04 Shog9

ग्रेट उत्तर, बहुत बहुत धन्यवाद! सिर्फ एक प्रश्न, आपकी प्रतिक्रिया की पहली पंक्ति को पढ़ना चाहिए: "100% का अर्थ है कि यह मूल तत्व के रूप में व्यापक होगा जैसा कि यह प्रासंगिक है। इस मामले में, * शरीर *।" –

उह, हाँ। मैं थोड़ी देर में उस अंतिम संपादन को खराब कर दिया ... सही किया। – Shog9

बस तुम दोनों चौड़ाई & ऊंचाई अगर आप एक पूरी पृष्ठभूमि इस्तेमाल कर सकते हैं, शरीर tagk साथ लिपटे 100% पर सेट के साथ एक पूर्ण तैनात छवि का उपयोग कर सकते हैं। पृष्ठभूमि मानी गई छवि से अधिक अन्य तत्वों के जेड-इंडेक्स को सेट करें।

 

<head> 
    ... 
    <style> 
    .virtualBg{ 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     z-index: 0; 
    } 
    </style> 
</head> 
<body> 
    <img src="path/to/bg.jpg" class="virtualBg" /> 
    ... 
</body>

लेकिन मैं एक खड़ी फसली छवि जो दोनों रंगों में शामिल है का उपयोग करें और फिर दोहराने-x शरीर तत्व के लिए पृष्ठभूमि करने के लिए सलाह देते हैं।

स्रोत

2009-03-14 06:12:21 sepehr

पृष्ठभूमि छवि पूर्ण पृष्ठ चौड़ाई नहीं बढ़ाती

उत्तर

संबंधित मुद्दे