2012-02-29 19 views
9

मैं एक divमीडिया प्रश्नों और पृष्ठभूमि छवियों

<div id="page"> 

</div> 

निम्नलिखित सीएसएस के साथ है:

#page { 
    background: url('images/white-zigzag.png') repeat-x; 
    } 

    @media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 

मैं जब मैं अपने ब्राउज़र का आकार बदलने, मैं "मोबाइल" पृष्ठभूमि (अच्छा) को देखने के नोटिस लेकिन अगर मैं वापस जाता हूं और अपना ब्राउज़र बड़ा बनाता हूं, तो मेरी पिछली "बड़ी" पृष्ठभूमि हमेशा दिखाई नहीं देती है।

यह एक अड़चन समस्या है लेकिन यह अक्सर हो रहा है कि मुझे लगता है कि मुझे इसे संबोधित करना चाहिए।

क्या इस "पृष्ठभूमि छवि दिखाई नहीं दे रहा है" समस्या या पृष्ठभूमि छवियों का आकार बदलने का कोई तरीका है, ताकि मीडिया क्वेरी पृष्ठभूमि छवि को नए आकार में फिट करने के लिए "संक्षिप्त" कर दे? जहाँ तक मुझे पता के रूप में वहाँ कोई (व्यापक) जिस तरह से एक पृष्ठभूमि छवि का आकार बदलने के ...

+1

क्या आप @media का उपयोग करके देखें (न्यूनतम-चौड़ाई: 600px) {पृष्ठभूमि: यूआरएल ('छवियों/सफेद वक्र। पीएनजी ') दोहराना-एक्स; } मुझे यकीन नहीं है कि यह काम करता है, यही कारण है कि यह एक टिप्पणी है। – Tim

+1

आप शायद पहले से ही इस लिंक को जानते हैं: http://css-tricks.com/how-to-resizeable-background-image/ (पृष्ठभूमि छवि के आकार को फिर से बदलना)। – juanrpozo

+0

जब मैं करता हूं तो यह छवि का आकार बदलता नहीं है ... यह है कि मैं सिर्फ छवि का हिस्सा देखता हूं, छवि – redconservatory

उत्तर

18
this test के अनुसार

डिवाइस -

आपको डेस्कटॉप छवि के लिए न्यूनतम ब्राउज़र चौड़ाई निर्दिष्ट करने के लिए min-width घोषणा का उपयोग करने की आवश्यकता है ...

मोबाइल छवि के लिए

औरmax-width

तो अपने कोड होगा:

@media (min-width: 601px) { 
    #page { 
    background: url('images/white-zigzag.png') repeat-x; 
    } 
} 

@media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 
+0

यदि यह किसी की सहायता करता है, तो मेरी समस्या में '' टैग उचित रूप से शामिल नहीं था, जैसे कुछ: '<मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, उपयोगकर्ता-स्केलेबल = नहीं "> आगे सीएसएस के बाकी हिस्सों में से। – YPCrumble

+0

इसमें कोई समस्या है: जब व्यूपोर्ट का आकार बदलता है (छोटे आकार में), फ़ायरफ़ॉक्स और क्रोम छोटे छवि आकार को भी डाउनलोड करेंगे, उदा। आप बड़े स्क्रीन आकार (चौड़ाई> = 601 पीएक्स) से शुरू करते हैं और ब्राउज़र बड़ी छवि डाउनलोड करता है; फिर आप ब्राउज़र को चौड़ाई <= 600px पर आकार बदलते हैं और आपका ब्राउज़र छोटी छवि भी डाउनलोड करेगा, जो पूरी तरह से व्यर्थ है, क्योंकि आपके पास पहले से ही बड़ा रिज़ॉल्यूशन है और अब आप छोटे को भी डाउनलोड कर सकते हैं। चीजों के तर्क के खिलाफ पूरी तरह से (केवल सबसे बड़ा आकार डाउनलोड करके बैंडविड्थ को सहेजना)। –

+0

@ ड्रंकनमास्टर आप * उस व्यवहार की तरह * नहीं हो सकते हैं लेकिन यह किसी भी तरह से अजीब नहीं है। ब्राउज़र यह नहीं जानता कि दो छवियां एक ही तस्वीर के अलग-अलग संकल्प हैं, कई लोग * अलग * छवियों को प्रदर्शित करते हैं, भले ही यह मोबाइल या डेस्कटॉप हो। मैं, एक के लिए, इस व्यवहार को पसंद करते हैं। – TKoL

1

कोड आपके द्वारा दी गई एक छोटी सी गाड़ी है जो शायद एक अच्छी जगह वर्तमान में आपके पास शुरू करने के लिए है है

#page { 
background: url('images/white-zigzag.png') repeat-x; 
} 

@media (max-width: 600px) { 
background: url('images/white-zigzag-mobile.png') repeat-x; 
} 

मीडिया क्वेरी भाग पूरा नहीं हुआ है।

उस के साथ
#page { 
background: url('images/white-zigzag.png') repeat-x; 
} 

@media (max-width: 600px) { 
    #page {  
    background: url('images/white-zigzag-mobile.png') repeat-x; 
    } 
} 

प्रारंभ और मुझे पता है कि अगर चीजें ठीक करता है चलो: आप अभी भी CSS चयनकर्ता कि आप क्वेरी के बाहर किया जाता प्रदान करने के लिए की जरूरत है।

यदि आप चाहते हैं केवल छवि के डेस्कटॉप संस्करण डेस्कटॉप पर डाउनलोड किया जा करने के लिए ...

और केवल मोबाइल छवि मोबाइल पर डाउनलोड किया जा करने के लिए:

+0

क्षमा करें कि मेरे हिस्से पर एक टाइपो था ... मैंने ऊपर अपना प्रश्न सही किया। – redconservatory

0

का इस्तेमाल करें

`@media screen and (min-width: 320px) and (max-width:580px) { 
#page{ 
background: url('images/white-zigzag.png') repeat-x;}}` 
+1

कृपया बताएं कि प्रश्न पर आपका उत्तर क्यों सुधार करेगा – nomistic

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