सीएसएस: क्या पृष्ठभूमि के रूप में इसका उपयोग करने के लिए किसी छवि का केवल एक भाग दोहराना संभव है?

Question

मैं एक छवि एक गोल कोने आयत है कि है, मैं का उपयोग करके पृष्ठभूमि के ऊपर और नीचे भाग के लिए इसका इस्तेमाल करते हैं:

#content_top { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content_bottom { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll; 
    height: 10px; 
} 

तो मैं खड़ी दोहराने के लिए एक और 1px ऊंचाई छवि का उपयोग में क्षेत्र को भरने के लिए इस div की पृष्ठभूमि के लिए। इस तरह:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll; 
} 

अब मैं आश्चर्य यह संभव है बस एक ही छवि (content_top_bottom.png), लेकिन यह का ही हिस्सा उपयोग करने के लिए, एक ही प्रभाव को प्राप्त करने? मैं कुछ इस तरह की कोशिश की, लेकिन यह काम नहीं किया:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll; 
} 

मैं एक ही छवि का उपयोग करने क्योंकि मैं http अनुरोध की संख्या को कम करना चाहते हैं चाहते हैं। 1 पीएक्स छवि शायद एक बड़ा प्रभाव नहीं है, लेकिन मैं बस कोशिश करना चाहता हूँ। कोई भी मदद कर सकता है?

Answer 1

एक दूसरे के बगल में शीर्ष, मध्य और निचले हिस्सों को रखकर छवि 2280 x 10 बनाएं। ,

#content_top { 
    background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content { 
    background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll; 
} 

#content_bottom { 
    background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll; 
    height: 10px; 
} 

Answer 2

मैं 3 छवियों का उपयोग करने का सुझाव देते हैं साइट भर में: तो फिर तुम मध्य भाग को दोहरा सकते हैं

1. स्टैंडर्ड न दोहराई स्प्राइट। यह आपके मामले में content_top_bottom.png होगा (हालांकि इसे पुनर्नामित करना बेहतर हो सकता है, इसलिए यह अधिक सामान्य है और अन्य भागों के लिए उपयोग किया जा सकता है)।
2. एक "दोहराना-एक्स" छवि। यह एक छवि 1px चौड़ा होगा (या डिजाइन के आधार पर थोड़ा और अधिक) लेकिन बहुत लंबा है। इसमें आप क्षैतिज रूप से दोहराने वाली सभी छवियां डाल देंगे।
3. एक "दोहराना-वाई" छवि, 1px लंबा और बहुत चौड़ा छोड़कर # 2 के समान। यहां आप अपनी content_body.png छवि डाल देंगे।

हालांकि अपने वर्तमान स्थिति में यह 2 HTTP अनुरोध प्राप्त होता है, यह एक बहुत अधिक स्केलेबल है क्योंकि आप पृष्ठभूमि दोनों दिशाओं, वे अलग-अलग रहना होगा कि टाइल के लिए एक से अधिक 3. दुर्भाग्य से उपयोग नहीं करेगा।

आप CSS3 संपत्ति, border-image के बारे में भी पढ़ने में रुचि रखते हैं, जो आपको एक पूर्ण तत्व के लिए एक छवि का उपयोग करने की अनुमति देगा। यह अभी तक समर्थित नहीं है लेकिन उम्मीद है कि यह भी लंबा नहीं होगा!