इस Tutorial में हम आपको CSS Background Property के बारे में पूरी जानकारी देंगे. आप जानेंगे कि CSS Background Property क्या हैं? CSS Background कैसे Set किया जाता हैं अध्ययन की सुविधा के लिए इस Tutorial को हमने निम्न Sections में बांटा हैं.
CSS Background Property का इस्तेमाल Webpages में Background Set करने के लिए किया जाता हैं. CSS Background को नियत्रित करने के लिए कई अतिरिक्त Background Properties भी Provide कराती हैं.
आमतौर पर Background Body Element में Define किया जाता हैं. जो हमारे पूरे वेबपेज पर Apply हो जाता हैं. आप चाहे तो किसी Particular Element के लिए भी Background Set कर सकते हैं.
आप अपनी पसंद के अनुसार किसी भी प्रकार का Background Set कर सकते हैं. आप चाहे तो Color Background Set कर सकते हैं. या फिर आप Image Background भी Set कर सकते हैं. इन दोनों के बारे में नीचे बताया जा रहा हैं.
Setting Background Color
आप अपने HTML Document के लिए Color Background Set करना चाहते हैं, तो इसके लिए CSS की background-color Property का इस्तेमाल किया जाता हैं. और इसकी Value में Color को Define किया जाता हैं.
आप Color Value को किसी भी प्रकार से Define कर सकते हैं. आप चाहे तो Color Name Define करें, या Color की Hex Value लिखे, या फिर आप इसे RGB Value में भी Set कर सकते हैं. इस बारे में आप अधिक जानकारी के लिए CSS Color Tutorial को पढ सकते हैं. जहाँ हमने विस्तार से CSS Color के बारे में बताया हुआ हैं.
Image Background को Control करने के लिए CSS Extra Properties भी Provide कराती हैं. जिनके द्वारा आप Image Background को अपने हिसाब से नियत्रित कर सकते हैं. इन Extra Properties के बारे में नीचे बताया जा रहा हैं.
Background Image को Repeat करना
अगर आपकी Image Size छोटी हैं. तो वह पूरे Background को Cover नहीं करेगी. आपकी Image पूरे Background को Cover करें. इसके लिए background-repeat Property का इस्तेमाल किया जाता हैं. इसकी चार संभावित Values हो सकती हैं.
repeat – इस Value के द्वारा आपकी Background Vertically (खडी) और Horizontally (आडी) दोनों तरफ बराबर Repeat होगी.
no-repeat – इस Value के द्वारा Background Image किसी भी तरफ Repeat नहीं होगी.
repeat-x – इस Value से Background Image Horizontally Repeat होगी.
repeat-y – इस Value से Background Image Vertically Repeat होगी.
ऊपर दिया कोड आपको ये परिणाम देगा. इसमे आप देख सकते हैं कि Background Image Horizontally Repeat हो रही हैं. आप इसी तरह अन्य Properties को भी Apply कर सकते हैं.
अगर आप किसी Particular Property को लिखना नही चाहते हैं, तो इसकी जगह पर Default Setting Apply हो जाती हैं. और इनका क्रम सही बना रहता हैं.
Background Image की Position Set करना
Background आपके Content को प्रभावित कर सकता हैं. इसलिए Background Image की Position को Manually Control करना जरूरी हैं.
इसलिए Background Image की Position को नियत्रित करने के लिए background-position Property का इस्तेमाल किया जाता हैं. By Default Background Image की Position top-left होती हैं. जब आप इसे Manually Set करते हैं, तो इसमें पहली Value Left Side से दूरी Define करती हैं. और दूसरी Value Top से दूरी Define करती हैं.
ऊपर दिया गया कोड आपको ये परिणाम देगा. हमने Background Image की Position को अपने हिसाब से Set किया हैं. आप आवश्यकतानुसार कही पर भी Background Image को Set कर सकते हैं.
Background Image की Scroll Setting करना
आप Background Image की Scroll Setting भी कर सकते हैं. इसके लिए background-attachment Property का इस्तेमाल किया जाता हैं. इसकी दो संभावित Value होती हैं.
fixed – जब आप पेज को ऊपर या नीचे की तरफ Scroll करते हैं. तब इस Value से Background Image भी ऊपर-नीचे सरकती हैं.
scroll – और Scroll Value से Background Image एक जगह ही रहती हैं.
आपने अब तक CSS Background की कई Properties के बारे में जाना हैं. हम इन सभी Properties को अलग-अलग Define कर रहे थे. लेकिन, आप इन सभी Properties को एक साथ भी Define कर सकते हैं. इस तकनीक को Shorthand Method कहते हैं.
जब आप Shorthand Method से Background Image Set करते हैं, तो इनका क्रम पहले से तय रहता हैं. जो इस प्रकार हैं.
background-color
background-image
background-repeat
background-attachment
background-position
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Background Property की पूरी जानकारी दी हैं. आपने Color Background और Image Background के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
