बैकग्राउंड इमेज सेट करने के लिए CSS का उपयोग करना

• मई 19, 2024

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

आपकी पृष्ठभूमि छवि के लिए मौलिक बिल्डिंग ब्लॉक, पर्याप्त रूप से, 'पृष्ठभूमि-छवि' संपत्ति है। आप इस संपत्ति का उपयोग अपनी साइट को यह बताने के लिए करते हैं कि छवि फ़ाइल कहाँ स्थित है, इस प्रकार है:

तन {
पृष्ठभूमि-छवि: url ("image.gif");
}

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

तन {
पृष्ठभूमि-छवि: url ("image.gif");
पृष्ठभूमि-स्थिति: केंद्र शीर्ष;
}

'पृष्ठभूमि-स्थिति' की संपत्ति को परिभाषित करते समय, पहला मान क्षैतिज संरेखण (बाएं, केंद्र या दाएं) को सेट करता है और दूसरा छवि के ऊर्ध्वाधर संरेखण (शीर्ष, केंद्र या नीचे) को सेट करता है।

इसके बाद, आप तय करते हैं कि आप छवि को टाइलिंग (खुद को दोहराते हुए) को क्षैतिज रूप से रोकना चाहते हैं, हालांकि आप इसे लंबवत रूप से टाइल करना चाहते हैं। यह 'पृष्ठभूमि-दोहराने' की संपत्ति को बाहर लाने का समय है:

तन {
पृष्ठभूमि-छवि: url ("image.gif");
पृष्ठभूमि-स्थिति: केंद्र शीर्ष;
बैकग्राउंड-रिपीट: रिपीट-वाई;
}

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

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

तन {
पृष्ठभूमि-छवि: url ("image.gif");
पृष्ठभूमि-स्थिति: केंद्र शीर्ष;
बैकग्राउंड-रिपीट: रिपीट-वाई;
पृष्ठभूमि-लगाव: निश्चित;
}


यदि आप अपने सीएसएस नियमों को यथासंभव छोटा रखना चाहते हैं, तो आप अपने सभी पृष्ठभूमि मूल्यों को 'पृष्ठभूमि' संपत्ति का उपयोग करके एक पंक्ति में जोड़ सकते हैं, जैसे:

पृष्ठभूमि {
url ("image.gif") रिपीट-वाई फिक्स्ड सेंटर टॉप;
}

'पृष्ठभूमि' संपत्ति का उपयोग करते समय आपको एक विशिष्ट क्रम में मूल्यों को सूचीबद्ध करना होगा:
[पृष्ठभूमि-रंग (यदि उपयोग किया जाता है)] [पृष्ठभूमि-छवि] [पृष्ठभूमि-दोहराना] [पृष्ठभूमि-लगाव] [पृष्ठभूमि-स्थिति]। आप किसी भी मूल्य को छोड़ सकते हैं जिसकी आपको आवश्यकता नहीं है, आपको बस किसी भी मूल्य को सूचीबद्ध करने की आवश्यकता है जो आप उचित क्रम में उपयोग करते हैं या नियम काम नहीं करेगा।

वीडियो निर्देश: Kisi bhi photo ka background change Kare sirf ek second mein (मई 2024).