CSS के साथ वर्डप्रेस हैडर इमेज को कैसे परिभाषित और पोजिशन करें?

लिसा सबिन-विल्सन द्वारा

अधिकांश वर्डप्रेस थीम में एक हेडर इमेज होती है जो पेज के शीर्ष पर दिखाई देती है। यह छवि हेडर क्षेत्र का प्रतिनिधित्व करने वाली संपत्ति के लिए सीएसएस मूल्य में या वर्डप्रेस में कस्टम हेडर सुविधा के उपयोग के माध्यम से परिभाषित ग्राफिक द्वारा उत्पन्न होती है।



हेडर के रूप में उपयोग करने के लिए पृष्ठभूमि छवि को कैसे परिभाषित करें

वर्डप्रेस डिफ़ॉल्ट ट्वेंटी थर्टीन थीम में, ट्वेंटी थर्टीन थीम का उपयोग करने वाली साइट पर एक कस्टम हेडर इमेज सहित, बहुत आसान है। आपके लिए पूरी मेहनत की गई है।



जिन थीम में कस्टम हेडर इमेज फीचर नहीं है, आप सीएसएस का उपयोग करके हेडर इमेज के लिए बैकग्राउंड इमेज को आसानी से परिभाषित कर सकते हैं। इस उदाहरण के प्रयोजनों के लिए, टेम्पलेट में शीर्षलेख के लिए HTML मार्कअप है

 

सीएसएस में (स्टाइल.सीएसएस) फ़ाइल में, आप पृष्ठभूमि छवि को सीएसएस गुणों में परिभाषित करके उपयोग कर सकते हैं#हेडर. इस कोड का प्रयोग करें:



#header { background: url(/images/header-image.jpg) no-repeat; width: 980px; height: 100px; }

पृष्ठभूमि मान इंगित करता है aहेडर-इमेज.जेपीजीछवि। उस छवि को आपकी साइट पर प्रदर्शित करने के लिए, आपको छवि बनाने और इसे अपने वेब सर्वर पर अपलोड करने की आवश्यकता है/इमेजिस/निर्देशिका।

वेब पर ग्राफ़िक्स के साथ काम करते समय, GIF, JPG, या PNG छवि प्रारूपों का उपयोग करना एक अच्छा विचार है। कम संख्या में रंगों वाली छवियों के लिए (जैसे चार्ट, रेखा कला, लोगो, और इसी तरह), GIF प्रारूप सबसे अच्छा काम करता है। अन्य छवि प्रकारों के लिए (पाठ और छवियों के साथ स्क्रीनशॉट, मिश्रित पारदर्शिता, और इसी तरह), JPG या PNG का उपयोग करें।

अपनी पृष्ठभूमि छवि को कैसे स्थिति दें, दोहराएं या स्क्रॉल करें

अपनी थीम में उपयोग करने के लिए ग्राफ़िक अपलोड करने के बाद, आप उसे स्थिति देने के लिए CSS पृष्ठभूमि गुणों का उपयोग कर सकते हैं। मुख्य सीएसएस गुण -पृष्ठभूमि स्थिति,पृष्ठभूमि दोहराएँ, तथापृष्ठभूमि संलग्न- वांछित प्रभाव प्राप्त करने में आपकी सहायता करें।



संपत्ति विवरण मूल्यों उदाहरण
पृष्ठभूमि स्थिति आपकी पृष्ठभूमि छवि का प्रारंभिक बिंदु आपके . पर निर्धारित करता है
वेब पृष्ठ
निचला केंद्र, नीचे दाएं, बाएं केंद्र, दायां केंद्र, केंद्र,
केन्द्र
पृष्ठभूमि-स्थिति: निचला केंद्र;
पृष्ठभूमि दोहराएँ निर्धारित करता है कि आपकी पृष्ठभूमि छवि दोहराएगी या
टाइल
दोहराना (अनंत रूप से दोहराता है), दोहराना-y (लंबवत दोहराता है),
रिपीट-एक्स (क्षैतिज रूप से दोहराता है), नो-रिपीट (दोहराना नहीं)
बैकग्राउंड-रिपीट: रिपीट-वाई;
पृष्ठभूमि संलग्न निर्धारित करता है कि आपकी पृष्ठभूमि छवि स्थिर है या स्क्रॉल है
ब्राउज़र विंडो के साथ
फिक्स्ड स्क्रॉल पृष्ठभूमि-अनुलग्नक: स्क्रॉल;

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

background: #f1f1f1;

सेवा मेरे

background: #FFFFFF; background-image: url(images/header-image.jpg); background-repeat: repeat-x;

या आप उपयोग कर सकते हैं

background: #FFFFFF url(images/header-image.jpg) repeat-x;

दिलचस्प लेख