CSS Background Properties in Hindi – इसे कैसे use करें?

क्या आप अपने website को और आकर्षक बनाना चाहते हैं? अगर हां तो आपको CSS की background properties के बारे में जरूर पता होना चाहिए। CSS से आप अपने वेबसाइट के body, image, heading, text या किसी भी element में background color या image लगा सकते हैं।

CSS background properties बहुत ही useful है जिस उपयोग करके आप अपने webpage के किसी भी HTML element या selector जैसे class, ID आदि को बड़ी आसानी से color या image के साथ decorate कर सकते हैं।

इस article में आप CSS का use करके element के बैकग्राउंड में color और image apply करना और उसे adjust करना सीखेंगें।

CSS Background Properties in Hindi

बैकग्राउंड को पूरी तरह से control करने के लिए CSS में कई सारे properties हैं जिनको हम अपने requirements के अनुसार उपयोग कर सकते हैं।

तो चलिए हम इनमे से कुछ important properties को detail से जानते हैं और implement कर के देखते हैं।

Background color set करना

किसी element के बैकग्राउंड में कलर डालने के लिए हमे background-color property का उपयोग करना होता है।

आप नीचे example में इसे अच्छे से समझ सकते हैं जहाँ हमने HTML page के body, paragraph और heading elements में इस property को apply किया है।

आप ऊपर देख सकते हैं हमने तीन elements में background color add किया लेकिन हमने कलर specify करने के लिए अलग-अलग तरीके use किये हैं।

CSS में color specify करने के लिए तीन methods use होते हैं:

1. Color name के द्वारा – जैसे “red”
2. HEX value से – जैसे “#cccccc”
3. RGB value से – जैसे “rgb(255,0,0)”

सबसे ज्यादा उपयोग होने वाला तरीका है HEX value वाला है आप Photoshop जैसे software या htmlcolorcodes.com पर बड़ी आसानी से किसी भी रंग का hex code निकाल सकते हैं।

हमें color name का उपयोग नही करना चाहिए इसको use करने से कई बार ऐसा होता है की जो कलर हमें चाहिए होता है वह वैसा नही दिखाई देता।

जैसे हम color में blue specify करते हैं तो यह पूरी तरह से browser पर depend करता है वह blue color का कौनसा shade दिखायेगा और अलग-अलग browser में अलग-अलग दिखाई दे सकता है।

Background image property

किसी element के पीछे अगर हमे image को बैकग्राउंड के रूप में डालना है तो इसके लिए हम background-image property का use करेंगे।

चलिए इसे हम एक उदाहरण के माध्यम से समझने का प्रयास करते हैं:

इस प्रॉपर्टी में हमे image की url यानि के लोकेशन बताना पड़ता है जिसके लिए url() का उपयोग करना होता है।

आप अपने system में उपलब्ध picture का उपयोग कर सकते हैं या internet पर availabe image के link का use कर सकते हैं।

मैंने इमेज के लिए http://bgrepeat.com का उपयोग किया है जो की बहुत ही बढिया वेबसाइट है repeatable background image download करने के लिए।

Background Image को repeat करना

वेबसाइट के बैकग्राउंड में अगर हम large image का उपयोग करते हैं तो जाहिर सी बात है वह load होने में time लेगा और आपकी वेबसाइट की loading speed को slow कर देगा इसलिए इस समस्या से निपटने के लिए छोटे से image को लगाया जाता है और उसे पुरे body में रिपीट कर के फैला दिया जाता है।

हम इमेज को horizontally, vertically या फिर आवश्यकतानुसार दोनों direction में repeat कर सकते हैं।

हमे इस काम के लिए background-repeat property का उपयोग करना होता है, इस प्रॉपर्टी के 4 values होते हैं जो की इस प्रकार हैं:

1. repeat: इससे इमेज x और y दोनों direction में repeat होता है और पूरे blank area को कवर कर लेता है
2. no-repeat: इससे repeat नही होता है केवल एक बार ही display होता है
3. repeat-x: x दिशा में रिपीट करने के लिए
4. repeat-y: y direction में रिपीट करने हेतु उपयोग होता है

आइये अब इसे हम एक उदहारण से इसे समझने का प्रयास करते हैं, हमने इस example में paragraph (p), unordered list (ul) और ordered list (ol) के बैकग्राउंड में अलग-अलग image add करके उसे repeat किया है।

p element में इमेज को दोनों तरफ यानि x और y दोनों axis में repeat किया जबकि ul और ol के बैकग्राउंड को x और y direction में repeat कराया।

Background Position set करना

हम background का exact position भी सेट कर सकते हैं इसके लिए background-position property use करते हैं जिसमे हम left और top से background की दूरी बताते हैं।

अगर हम इस प्रॉपर्टी का उपयोग नही करते हैं तो बैकग्राउंड की position by default top-left होती है।

इसको समझने के लिए इसका example नीचे दिया जा रहा है:

background-position की दो value हमे एकसाथ दे सकते हैं जिसमे से पहली value left से और दूसरी value top से बैकग्राउंड की दूरी बताते हैं, इसे हम pixel या percentage में भी specify कर सकते हैं|

Fixed Background Image डालना

हम अपने Background Image को fixed भी कर सकते हैं यानि के जब हम पेज को scroll करेंगे तो वह अपने स्थान पर स्थिर रहेगा जब की पेज के बाकि contents scroll हो सकेंगे।

इस प्रॉपर्टी का उपयोग नही करने पर by default हमारा image scroll-able होता है| इसका उपयोग ज्यादातर body tag पर किया जाता है।

आप नीचे दिए एक simple example से इसे समझ सकते हैं:

Background Shorthand Property

आपने ऊपर कई सारे properties देखे हैं जो की अलग-अलग काम के हैं, लेकिन इन सारे प्रॉपर्टीज को एकसाथ अलग-अलग specify किया जाये तो code का size लम्बा हो सकता है।

ऐसे में हमारे पास दूसरा option है जिससे हम एक ही लाइन में सारे properties को specify कर सकते हैं इसके लिए background की shorthand property use किया जाता है।

हम इसमें सारे values एकसाथ डाल देते हैं।

इसका syntax कुछ ऐसा होता है :

background: color image repeat attachment position;

आज आपने इस article में CSS background properties in Hindi के बारे में जाना, आप इसे practically कर के देखें यह बहुत ही आसान है और मजेदार भी, आप अलग-अलग पेज बना कर उनके बैकग्राउंड को change करके देखें और कोई सवाल पूछना हो तो हमे comment के जरिये जरूर बताएं |