लेखक से:सभी को नमस्कार। पृष्ठभूमि के रंग और छवियां वेब डिज़ाइन में बहुत बड़ी भूमिका निभाते हैं, क्योंकि वे आपको किसी भी तत्व को अधिक आकर्षक ढंग से डिज़ाइन करने की अनुमति देते हैं। आज हम देखेंगे कि HTML में बैकग्राउंड कैसे बनायें।
क्या पृष्ठभूमि सेट करने के लिए HTML का उपयोग करना संभव है?
मैं तुरंत कहूंगा कि नहीं। सामान्य तौर पर, html को वेब पेज डिज़ाइन करने के लिए नहीं बनाया गया था। यह बहुत असुविधाजनक है. उदाहरण के लिए, एक bgcolor विशेषता है, जिसके साथ आप पृष्ठभूमि का रंग सेट कर सकते हैं, लेकिन यह बहुत असुविधाजनक है।
तदनुसार, हम कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करेंगे। पृष्ठभूमि स्थापित करने के लिए बहुत अधिक अवसर हैं। आज हम सबसे बुनियादी चीज़ों पर नज़र डालेंगे।
सीएसएस का उपयोग करके पृष्ठभूमि कैसे सेट करें?
तो, सबसे पहले, आपको यह तय करना होगा कि आप किस तत्व पर पृष्ठभूमि सेट करना चाहते हैं। यानी हमें एक चयनकर्ता ढूंढना होगा जिस पर हम एक नियम लिखेंगे। उदाहरण के लिए, यदि आपको संपूर्ण पृष्ठ के लिए पृष्ठभूमि सेट करने की आवश्यकता है, तो आप इसे बॉडी चयनकर्ता के माध्यम से और सभी ब्लॉक के लिए div चयनकर्ता के माध्यम से कर सकते हैं। खैर, आदि. पृष्ठभूमि किसी अन्य चयनकर्ता से बंधी हो सकती है और होनी भी चाहिए: शैली वर्ग, पहचानकर्ता, आदि।
चयनकर्ता पर निर्णय लेने के बाद, आपको संपत्ति का नाम ही लिखना होगा। पृष्ठभूमि रंग सेट करने के लिए (अर्थात् ठोस रंग, ग्रेडिएंट या छवि नहीं), पृष्ठभूमि-रंग गुण का उपयोग करें। इसके बाद आपको कोलन लगाना होगा और कलर भी लिखना होगा। यह विभिन्न तरीकों से किया जा सकता है. उदाहरण के लिए, कीवर्ड, हेक्स कोड, आरजीबी, आरजीबीए, एचएसएल प्रारूपों का उपयोग करना। कोई भी तरीका चलेगा.
सबसे अधिक उपयोग की जाने वाली विधि हेक्साडेसिमल कोड है। रंगों का चयन करने के लिए, आप एक प्रोग्राम का उपयोग कर सकते हैं जो रंग कोड प्रदर्शित करता है। उदाहरण के लिए, फ़ोटोशॉप, पेंट या कोई ऑनलाइन टूल। तदनुसार, उदाहरण के तौर पर, मैं संपूर्ण वेब पेज के लिए एक सामान्य पृष्ठभूमि लिखूंगा।
शरीर (पृष्ठभूमि-रंग: #D4E6B3;)
इस कोड को मुख्य अनुभाग में डालने की आवश्यकता है। यह महत्वपूर्ण है कि फ़ाइलें एक ही फ़ोल्डर में हों।
पृष्ठभूमि के रूप में चित्र
मैं छवि के रूप में एक छोटे आइकन का उपयोग करूंगा। एचटीएमएल भाषा:
आइए एक पहचानकर्ता के साथ एक खाली ब्लॉक बनाएं:
< div id = "bg" > < / div > |
आइए इसे स्पष्ट आयाम और पृष्ठभूमि दें:
#बीजी(चौड़ाई: 400पीएक्स; ऊंचाई: 250पीएक्स; पृष्ठभूमि-छवि: यूआरएल(एचटीएमएल.पीएनजी); )
#बीजी( चौड़ाई: 400px; ऊंचाई: 250px; पृष्ठभूमि - छवि : यूआरएल (एचटीएमएल . पीएनजी ); |
इस कोड से आप देख सकते हैं कि मैंने एक नई प्रॉपर्टी - बैकग्राउंड-इमेज का उपयोग किया है। इसका उद्देश्य विशेष रूप से किसी HTML तत्व की पृष्ठभूमि के रूप में एक चित्र सम्मिलित करना है। आइए देखें क्या हुआ:
चित्र निर्दिष्ट करने के लिए, आपको कोलन के बाद लिखना होगा कीवर्डयूआरएल, और फिर कोष्ठक में फ़ाइल का पथ इंगित करें। इस मामले में, पथ इस तथ्य के आधार पर निर्दिष्ट किया जाता है कि छवि HTML दस्तावेज़ के समान फ़ोल्डर में है। आपको छवि प्रारूप भी निर्दिष्ट करना होगा.
यदि आपने ऐसा कर लिया है, और पृष्ठभूमि अभी भी ब्लॉक में प्रदर्शित नहीं हुई है, तो दोबारा जांचें कि क्या आपने छवि का नाम सही ढंग से लिखा है, क्या पथ और एक्सटेंशन सही ढंग से सेट हैं। ये सबसे आम कारण हैं कि पृष्ठभूमि केवल इसलिए दिखाई नहीं देती है क्योंकि ब्राउज़र छवि नहीं ढूंढ पाता है।
लेकिन क्या आपने एक बात नोटिस की? ब्राउज़र ने छवि को पूरे ब्लॉक में लिया और गुणा किया। तो, जैसा कि आप जानते हैं, यह पृष्ठभूमि छवियों का डिफ़ॉल्ट व्यवहार है - जब तक वे ब्लॉक में फिट हो सकते हैं तब तक उन्हें लंबवत और क्षैतिज रूप से दोहराया जाता है। इस व्यवहार से आप आसानी से कंट्रोल कर सकते हैं। ऐसा करने के लिए, बैकग्राउंड-रिपीट प्रॉपर्टी का उपयोग करें, जिसमें 4 मुख्य मान हैं:
दोहराएँ - डिफ़ॉल्ट मान, छवि दोनों तरफ दोहराई जाती है;
दोहराएँ-x - केवल अक्ष x पर दोहराता है;
दोहराएँ-y - केवल y अक्ष के साथ दोहराता है;
नो-रिपीट - बिल्कुल नहीं दोहराता;
आप प्रत्येक मान लिख सकते हैं और देख सकते हैं कि क्या होता है। मैं इसे इस तरह लिखूंगा:
बैकग्राउंड-रिपीट: रिपीट-एक्स;
पृष्ठभूमि - दोहराएँ : दोहराएँ - x ; |
अब केवल क्षैतिज रूप से दोहराएं। यदि आप नो-रिपीट सेट करते हैं, तो केवल एक ही चित्र होगा।
बढ़िया, हम यहीं समाप्त कर सकते हैं, क्योंकि ये पृष्ठभूमि के साथ काम करने की बुनियादी क्षमताएं हैं, लेकिन मैं आपको 2 और गुण दिखाऊंगा जो आपको अधिक नियंत्रण प्राप्त करने की अनुमति देते हैं।
पुनरावृत्ति के माध्यम से, लेआउट डिजाइनर एक छोटी छवि का उपयोग करके पृष्ठभूमि बनावट और ग्रेडिएंट बनाने में सक्षम होते थे। यह 30 गुणा 10 पिक्सेल या उससे भी छोटा हो सकता है। या शायद थोड़ा ज्यादा. छवि ऐसी थी कि जब इसे एक या दोनों तरफ दोहराया गया, तो कोई बदलाव दिखाई नहीं दे रहा था, इसलिए परिणाम एक एकल, निर्बाध पृष्ठभूमि थी। वैसे, यदि आप पृष्ठभूमि के रूप में अपनी वेबसाइट पर एक निर्बाध बनावट का उपयोग करना चाहते हैं तो यह दृष्टिकोण अब उपयोग करने लायक है। आज ग्रेडिएंट को पहले से ही css3 विधियों का उपयोग करके लागू किया जा सकता है, हम निश्चित रूप से इसके बारे में बाद में बात करेंगे।
पृष्ठभूमि स्थिति
डिफ़ॉल्ट रूप से, पृष्ठभूमि छवि, जब तक कि इसे दोहराने के लिए सेट न किया जाए, इसके ब्लॉक के ऊपरी बाएँ कोने में होगी। लेकिन बैकग्राउंड-पोजीशन प्रॉपर्टी का उपयोग करके स्थिति को आसानी से बदला जा सकता है।
आप इसे अलग-अलग तरीकों से सेट कर सकते हैं. एक विकल्प केवल उन पक्षों को इंगित करना है जिनमें चित्र स्थित होना चाहिए:
पृष्ठभूमि-स्थिति: दाएँ शीर्ष;
पृष्ठभूमि - स्थिति : दाएँ शीर्ष ; |
यानी, लंबवत रूप से सब कुछ वैसा ही रहता है: पृष्ठभूमि छवि शीर्ष पर स्थित है, लेकिन क्षैतिज रूप से हमने पक्ष को दाईं ओर, यानी दाईं ओर बदल दिया है। स्थिति निर्धारित करने का दूसरा तरीका प्रतिशत के रूप में है। इस स्थिति में, उलटी गिनती किसी भी स्थिति में ऊपरी बाएँ कोने से शुरू होती है। 100% - संपूर्ण ब्लॉक। इस प्रकार, चित्र को बिल्कुल मध्य में रखने के लिए, हम इसे इस प्रकार लिखते हैं:
पृष्ठभूमि-स्थिति: 50% 50%;
पृष्ठभूमि-स्थिति: 50% 50%; |
स्थिति निर्धारण के बारे में एक महत्वपूर्ण बात याद रखें - पहला पैरामीटर हमेशा क्षैतिज स्थिति है, और दूसरा ऊर्ध्वाधर स्थिति है। इसलिए, यदि आप 80% 20% का मान देखते हैं, तो आप तुरंत यह निष्कर्ष निकाल सकते हैं कि पृष्ठभूमि छवि दाईं ओर बहुत अधिक स्थानांतरित हो जाएगी, लेकिन यह अधिक नीचे नहीं जाएगी।
और अंत में, आप पिक्सेल में स्थिति निर्दिष्ट कर सकते हैं। सब कुछ वैसा ही है, केवल % के स्थान पर px होगा। कुछ मामलों में, ऐसी स्थिति आवश्यक हो सकती है।
संक्षेप संकेतन
इस बात से सहमत हूं कि यदि सब कुछ वैसे ही सेट किया जाए जैसे हमने किया था तो कोड काफी बोझिल हो जाता है। यह पता चला है कि चित्र का पथ, पुनरावृत्ति और स्थिति निर्दिष्ट करने की आवश्यकता है। बेशक, पुनरावृत्ति और स्थिति हमेशा आवश्यक नहीं होती है, लेकिन किसी भी मामले में, संपत्ति के लिए शॉर्टहैंड नोटेशन का उपयोग करना अधिक सही होगा। यह इस तरह दिख रहा है:
पृष्ठभूमि: #333 यूआरएल(बीजी.जेपीजी) नो-रिपीट 50% 50%;
पृष्ठभूमि: #333 यूआरएल(बीजी.जेपीजी) नो-रिपीट 50% 50%; |
यानी, यदि आवश्यक हो तो पहला कदम समग्र ठोस पृष्ठभूमि रंग को रिकॉर्ड करना है। फिर छवि, पुनरावृत्ति और स्थिति का मार्ग। यदि किसी पैरामीटर की आवश्यकता नहीं है, तो उसे छोड़ दें। सहमत हूँ, यह बहुत तेज़ और अधिक सुविधाजनक है, और हम अपने कोड को भी काफी कम कर देते हैं। सामान्य तौर पर, मैं आपको हमेशा संक्षिप्त रूप में लिखने की सलाह देता हूं, भले ही आपको केवल रंग या चित्र इंगित करने की आवश्यकता हो।
पृष्ठभूमि छवि का आकार नियंत्रित करना
हमारी वर्तमान छवि अगली चाल प्रदर्शित करने के लिए बहुत अच्छी नहीं है, इसलिए मैं दूसरी चाल लूंगा। इसे एक ब्लॉक या उससे बड़े आकार का होने दें। तो, कल्पना करें कि आपको एक पृष्ठभूमि छवि बनाने के कार्य का सामना करना पड़ रहा है ताकि यह अपने ब्लॉक को पूरी तरह से न भर दे। और उदाहरण के लिए, चित्र ब्लॉक आकार से भी बड़ा है।
आप इस मामले में क्या कर सकते हैं? बेशक, सबसे सरल और सबसे उचित विकल्प केवल छवि को कम करना होगा, लेकिन ऐसा करना हमेशा संभव नहीं होता है। मान लीजिए कि यह सर्वर पर और अंदर स्थित है इस समयइसे कम करने का कोई समय या अवसर नहीं है। समस्या को पृष्ठभूमि-आकार संपत्ति का उपयोग करके हल किया जा सकता है, जिसे अपेक्षाकृत नया कहा जा सकता है और जो आपको पृष्ठभूमि छवि, या वास्तव में किसी भी पृष्ठभूमि के आकार में हेरफेर करने की अनुमति देता है।
तो मेरी छवि अब ब्लॉक में सारी जगह घेर लेती है, लेकिन मैं इसे एक पृष्ठभूमि आकार दूंगा:
पृष्ठभूमि-आकार: 80% 50%;
पृष्ठभूमि-आकार: 80% 50%; |
फिर, पहला पैरामीटर क्षैतिज आकार सेट करता है, दूसरा - ऊर्ध्वाधर आकार। हम देखते हैं कि सब कुछ सही ढंग से लागू किया गया था - फोटो ब्लॉक की चौड़ाई का 80% चौड़ाई में और आधा ऊंचाई में बन गया। यहां आपको बस एक स्पष्टीकरण देने की आवश्यकता है - आकार को प्रतिशत के रूप में सेट करके, आप चित्र के अनुपात को प्रभावित कर सकते हैं। इसलिए यदि आप चाहते हैं कि अनुपात में गड़बड़ी न हो तो सावधान रहें।
जैसा कि आप अनुमान लगा सकते हैं, पृष्ठभूमि का आकार पिक्सेल में भी निर्दिष्ट किया जा सकता है। दो और कीवर्ड हैं जिनका भी उपयोग किया जा सकता है:
कवर - छवि को स्केल किया जाएगा ताकि कम से कम एक तरफ यह ब्लॉक को पूरी तरह से भर दे।
कंटेनर - इसे स्केल करता है ताकि छवि अपने अधिकतम आकार में ब्लॉक में पूरी तरह से फिट हो जाए।
इन मूल्यों का लाभ यह है कि वे चित्र के अनुपात को नहीं बदलते हैं, उन्हें वही छोड़ देते हैं।
आपको यह भी समझना चाहिए कि तस्वीर को खींचने से उसकी गुणवत्ता में गिरावट आ सकती है। मैं लेआउट डिजाइनरों के जीवन और वास्तविक अभ्यास से एक उदाहरण दे सकता हूं। हर कोई जानता और समझता है कि डेस्कटॉप के लिए डिज़ाइन करते समय, आपको साइट को मुख्य मॉनिटर की चौड़ाई: 1280, 1366, 1920 के अनुसार अनुकूलित करने की आवश्यकता होती है। यदि आप 1280 x 200 के आकार के साथ एक पृष्ठभूमि छवि लेते हैं, और इसे नहीं देते हैं एक पृष्ठभूमि-आकार, फिर बड़ी चौड़ाई वाली स्क्रीन पर एक खाली स्थान दिखाई देगा, छवि चौड़ाई को पूरी तरह से नहीं भरेगी।
99% मामलों में, यह वेब डेवलपर के लिए उपयुक्त नहीं है, इसलिए वह पृष्ठभूमि-आकार: कवर सेट करता है ताकि छवि हमेशा विंडो की अधिकतम चौड़ाई तक फैली रहे। यह उपयोग करने के लिए एक अच्छी तकनीक है, लेकिन अब आपको इस समस्या का सामना करना पड़ेगा कि 1920 पिक्सल की स्क्रीन चौड़ाई वाले उपयोगकर्ताओं को एक उप-इष्टतम चित्र गुणवत्ता दिखाई दे सकती है।
मैं आपको याद दिला दूं, यह अपनी अधिकतम चौड़ाई तक फैलेगा। तदनुसार, गुणवत्ता स्वतः ही ख़राब हो जाएगी। यहां एकमात्र सही समाधान शुरुआत में एक बड़ी छवि - 1920 पिक्सेल चौड़ी - का उपयोग करना होगा। फिर सबसे चौड़ी स्क्रीन पर यह अपने प्राकृतिक आकार में होगा, और अन्य स्क्रीन पर इसे धीरे-धीरे काटा जाएगा, लेकिन साथ ही, पृष्ठभूमि छवि के उचित चयन के साथ, उपस्थितिइससे साइट पर कोई असर नहीं पड़ेगा.
सामान्य तौर पर, वास्तविक लेआउट बनाते समय इस लेख में प्राप्त ज्ञान का उपयोग कैसे करें, इसका यह सिर्फ एक उदाहरण है।
सीएसएस का उपयोग कर पारदर्शी पृष्ठभूमि
एक और विशेषता जिसके साथ कार्यान्वित किया जा सकता है सीएसएस का उपयोग करना – पारभासी पृष्ठभूमि. यानी इस बैकग्राउंड के जरिए यह देखना संभव होगा कि इसके पीछे क्या है.
उदाहरण के तौर पर, मैं पूरे पृष्ठ को उस छवि की पृष्ठभूमि के रूप में सेट करूँगा जिसे हमने पहले उदाहरणों में उपयोग किया था। पहचानकर्ता बीजी वाले ब्लॉक के लिए, जिस पर हम अपने सभी प्रयोग करते हैं, हम आरजीबीए रंग सेटिंग प्रारूप का उपयोग करके पृष्ठभूमि सेट करेंगे।
जैसा कि मैंने पहले कहा, सीएसएस में रंग सेट करने के लिए कई प्रारूप हैं। उनमें से एक आरजीबी है, जो काम करने वालों के लिए काफी प्रसिद्ध प्रारूप है ग्राफ़िक संपादक. इसे इस प्रकार लिखा गया है: आरजीबी(17, 255, 34);
कोष्ठक में पहला मान लाल, फिर हरा, फिर नीला की संतृप्ति है। मान 0 से 255 तक संख्यात्मक हो सकता है। तदनुसार, आरजीबीए प्रारूप अलग नहीं है, केवल एक और पैरामीटर जोड़ा जाता है - अल्फा चैनल। मान 0 से 1 तक हो सकता है, जहां 0 पूर्ण पारदर्शिता है।
व्लाद मर्ज़ेविच
वेब पेजों की ख़ासियत के कारण, पृष्ठभूमि छवियां साइट दस्तावेज़ों के लेआउट में महत्वपूर्ण भूमिका निभाती हैं। साथ ही, वे कई तरह की चीजों में सक्रिय रूप से शामिल होते हैं, उदाहरण के लिए, चित्रों को पाठ से जोड़ने की प्रक्रिया को स्वचालित करना, ग्रेडिएंट ट्रांज़िशन बनाना और निश्चित रूप से, सामग्री के नीचे एक पृष्ठभूमि जोड़ना। पृष्ठभूमि छवियों का उपयोग करने के कुछ पहलू नीचे दिए गए हैं।
किसी वेब पेज पर पृष्ठभूमि
किसी वेब पेज पर पृष्ठभूमि छवि सेट करना पारंपरिक रूप से टैग की पृष्ठभूमि विशेषता के माध्यम से होता है।
.यह पैटर्न क्षैतिज और लंबवत रूप से दोहराया जाता है, इस प्रकार संपूर्ण ब्राउज़र विंडो भर जाती है। यह स्पष्ट है कि यहां रचनात्मकता के लिए कोई विशेष विकल्प नहीं हैं, तो आइए शैलियों की ओर मुड़ें और देखें कि सीएसएस का उपयोग करके क्या किया जा सकता है।
सीएसएस में पांच विशेषताएं हैं जो पृष्ठभूमि छवि को नियंत्रित करती हैं: इसका जोड़, स्थिति और पुनरावृत्ति। हालाँकि, इन सभी मापदंडों को एक सार्वभौमिक संपत्ति, पृष्ठभूमि द्वारा प्रतिस्थापित किया जाता है, जिसका उपयोग हम भविष्य में करेंगे।
चित्र जोड़ना यूआरएल कीवर्ड का उपयोग करके चित्र का पता सेट करके होता है। किसी छवि की पुनरावृत्ति को नियंत्रित करने के लिए, तर्क नो-रिपीट, रिपीट-एक्स (क्षैतिज रूप से दोहराएँ) और रिपीट-वाई (ऊर्ध्वाधर रूप से दोहराएँ) का उपयोग किया जाता है। इसके लिए धन्यवाद, आप चित्र में दिखाया गया वेब पेज प्राप्त कर सकते हैं। 1.
किसी वेब पेज पर एक छवि सेट करने के लिए, आपको बॉडी चयनकर्ता में एक पृष्ठभूमि शैली गुण जोड़ना होगा, जैसा कि उदाहरण 1 में दिखाया गया है।
उदाहरण 1: पृष्ठभूमि छवि
इस उदाहरण में, ग्राफिक लक्ष्य.जीआईएफ को छवि को दोहराए बिना वेब पेज की पृष्ठभूमि के रूप में परिभाषित किया गया है। छवि को ब्राउज़र के किनारों पर कसकर फिट होने से रोकने के लिए, इसे अपनी मूल स्थिति से 30 पिक्सेल दाईं ओर और 20 पिक्सेल नीचे स्थानांतरित किया जाता है।
एक पैटर्न को दोहराना
इस तथ्य के कारण कि आप पृष्ठभूमि पैटर्न को क्षैतिज या लंबवत रूप से दोहराने के लिए सेट कर सकते हैं, वेब पेजों के डिज़ाइन के लिए कई विकल्प उपलब्ध हैं। उदाहरण के लिए, बाएं किनारे पर एक ऊर्ध्वाधर पट्टी बनाने के लिए (चित्र 2), आपको चित्र में दिखाई गई छवि की आवश्यकता होगी। 3.
डिज़ाइन ऐसा होना चाहिए कि यह ध्यान देने योग्य सीमों के बिना लंबवत रूप से एक साथ फिट हो, और वेब पेज के निर्दिष्ट पृष्ठभूमि रंग के साथ एक संपूर्ण रूप भी बनाए।
उदाहरण 2 दिखाता है कि बैकग्राउंड प्रॉपर्टी और उसके रिपीट-वाई मान का उपयोग करके ऐसी पृष्ठभूमि छवि कैसे बनाई जाए।
उदाहरण 2. पृष्ठभूमि को लंबवत रूप से दोहराना
इसी तरह, आप पृष्ठभूमि को क्षैतिज रूप से दोहरा सकते हैं, उदाहरण के लिए, एक ग्रेडिएंट बनाकर और इसे पृष्ठभूमि छवि के रूप में सेट करके (चित्र 4)।
चित्र में दिखाए गए वेब पेज को प्राप्त करने के लिए। 4, आपको सबसे पहले ग्रेडिएंट ट्रांज़िशन के साथ एक चित्र बनाना होगा। चौड़ाई 20-40 पिक्सेल निर्दिष्ट करने के लिए पर्याप्त है, और छवि की ऊंचाई दस्तावेज़ के उद्देश्य और वेब पेज की सामग्री की अपेक्षित ऊंचाई पर निर्भर करती है। यह भी न भूलें कि एक बड़ी ड्राइंग ग्राफ़िक फ़ाइल का आकार बढ़ाएगी। और इससे इसकी लोडिंग गति पर नकारात्मक प्रभाव पड़ेगा और अंततः, पृष्ठभूमि प्रदर्शन धीमा हो जाएगा। इस मामले के लिए, 30x200 पिक्सेल का चित्र काफी उपयुक्त था (चित्र 5)।
उदाहरण 3 ग्रेडिएंट बैकग्राउंड बनाने के लिए HTML कोड दिखाता है।
लोरेम इप्सम...
एक ग्रेडिएंट डिज़ाइन एकल-रंग ब्लॉक के साथ अच्छी तरह से मेल खाता है, इसलिए इस उदाहरण में हम वेब पेज की सामग्री को प्रदर्शित करने के लिए एक परत जोड़ते हैं।
पृष्ठभूमि छवि का उपयोग करके, आप शीर्षकों जैसे विशिष्ट पाठ में ग्राफ़िक्स जोड़ने की प्रक्रिया को स्वचालित कर सकते हैं। ऐसा करने के लिए, पृष्ठभूमि सार्वभौमिक संपत्ति का उपयोग करें, जो वांछित चयनकर्ता पर लागू होती है। मान चित्र का पथ है और इसे दोहराए जाने से रोकने के लिए, दोहराव न करने का तर्क है (उदाहरण 4)।
उदाहरण 4: एक चित्र जोड़ना
शीर्षक
मुख्य पाठ
जैसा कि इस उदाहरण में दिखाया गया है, चित्र को उसकी मूल स्थिति के सापेक्ष क्षैतिज और लंबवत रूप से ले जाया जा सकता है, डिफ़ॉल्ट रूप से यह ऊपरी बाएँ कोने है ब्लॉक तत्व. बैकग्राउंड शिफ्ट आपको छवि को पाठ के संबंध में वांछित तरीके से रखने की अनुमति देता है। टेक्स्ट को छवि को ओवरलैप करने से रोकने के लिए, आपको पैडिंग-लेफ्ट प्रॉपर्टी जोड़नी होगी, जिसके कारण टेक्स्ट निर्दिष्ट दूरी से दाईं ओर स्थानांतरित हो जाता है। यह प्रत्येक मामले में अलग-अलग होता है और आमतौर पर चित्र की चौड़ाई और छवि और पाठ के बीच वांछित स्थान के बराबर होता है।
लगभग हर लोकप्रिय वेबसाइट का स्वरूप अच्छा होता है। वेबसाइट डिज़ाइन का एक महत्वपूर्ण हिस्सा पृष्ठभूमि है, जिसे पृष्ठभूमि भी कहा जाता है, जिसे हम में से प्रत्येक बना या बदल सकता है। इस आर्टिकल में मैं आपको बताऊंगा कि किसी वेबसाइट पर बैकग्राउंड कैसे लगाया जाता है।
वेबसाइटों के लिए एक नई पृष्ठभूमि बनाना
कार्य को पूरा करने के लिए, आप 4 विधियों में से एक का उपयोग कर सकते हैं:
- 1. एक रंग के साथ पृष्ठभूमि
- 2. बनावट के साथ पृष्ठभूमि
- 3. ग्रेडिएंट का उपयोग करके पृष्ठभूमि
- 4. एक बड़ी छवि से पृष्ठभूमि
एक रंग का उपयोग करके पृष्ठभूमि बनाएं
साइट की पृष्ठभूमि बनाने या बदलने के लिए, जिसमें एक रंग होता है, आपको फ़ाइल पर जाना होगा स्टाइल.सीएसएस, जिसमें मान खोजें - बॉडी (यह साइट के मुख्य बॉडी के लिए जिम्मेदार है)। अब आपको पृष्ठभूमि-रंग फ़ंक्शन को पंजीकृत करने की आवश्यकता है यदि यह मौजूद नहीं था और रंग कोड इंगित करें। उस स्थिति में जब आपको किसी वेबसाइट के लिए एक सफेद पृष्ठभूमि बनाने की आवश्यकता हो, तो आपको निम्नलिखित कोड लिखना होगा:
पृष्ठभूमि-रंग: #83सी5ई9; (नीली पृष्ठभूमि, उदाहरण के अनुसार)
आप वेबसाइट - (एसटीएम) पर रंगों की पूरी सूची पा सकते हैं। रंग बदलने के लिए, बस कोलन के बाद मान बदलें और अपने प्रयासों का आनंद लें।
बनावट का उपयोग करके पृष्ठभूमि बनाना
यह विधि हाल ही में विशेष रूप से लोकप्रिय रही है, क्योंकि यह आपको साइट के लिए एक सुंदर पृष्ठभूमि बनाने की अनुमति देती है। बनावट सरल लेकिन बहुत सुंदर हो सकती है, यही कारण है कि उनका अक्सर उपयोग किया जाता है। किसी भी बनावट को जोड़ने के लिए, आपको इसे होस्टिंग पर छवि फ़ोल्डर में अपलोड करना होगा जहां आपकी साइट स्थापित है। इसके बाद आपको निम्नलिखित कोड लिखना चाहिए:
पृष्ठभूमि-रंग: #537759;
पृष्ठभूमि-छवि: यूआरएल(छवियां/पैटर्न.पीएनजी);
इस कोड में रंग बनाए रखने के लिए एक परिचित पैरामीटर (यह हरा है) और एक तत्व शामिल है जो हरे रंग की बनावट को जोड़ने के लिए जिम्मेदार है।
ग्रेडिएंट का उपयोग करके पृष्ठभूमि बनाना
सीएसएस फ़ंक्शंस का उपयोग करके कनेक्ट की गई कोई भी छवि क्षैतिज और लंबवत (अक्ष के साथ) दोनों तरह से दोहराई जा सकती है एक्सऔर वाई). यह अवसर हमें अपने हाथों से साइट के लिए कोई भी सरल पृष्ठभूमि बनाने की अनुमति देता है। ऐसा करने के लिए, आपको 1 मेगापिक्सेल चौड़ा एक ग्रेडिएंट बनाना होगा (नीचे दी गई छवि देखें), इसे एक छवि के रूप में सहेजें और अपनी होस्टिंग पर अपलोड करें। इसके बाद, आप आवश्यक कोड लिख सकते हैं, अर्थात्:
पृष्ठभूमि-रंग: #83C5E9;
पृष्ठभूमि-छवि: यूआरएल (छवियां/ग्रेडिएंट.जेपीजी);
बैकग्राउंड-रिपीट: रिपीट-एक्स;
इस सेट में, प्राथमिकता के क्रम में, पृष्ठभूमि रंग के लिए जिम्मेदार एक फ़ंक्शन होता है, जिसका उपयोग हम पुनर्बीमा के लिए करते हैं। इसके बाद, एक पैरामीटर जो ग्रेडिएंट को जोड़ने के लिए जिम्मेदार है और अंत में, एक फ़ंक्शन जो एक्स अक्ष के साथ ग्रेडिएंट को दोहराने के लिए जिम्मेदार है।
वेबसाइट पृष्ठभूमि के लिए एक बड़ी छवि का उपयोग करना
यह विधि दूसरी सबसे लोकप्रिय है, क्योंकि यह आपको पृष्ठभूमि बनाने के लिए विभिन्न चित्रों का उपयोग करने की अनुमति देती है। इस विधि को लागू करने के लिए आपको केवल डाउनलोड करना होगा बड़ी छविसाइट छवियों वाले फ़ोल्डर में और निम्नलिखित कोड लिखें:
पृष्ठभूमि-रंग: #000000;
पृष्ठभूमि-छवि: यूआरएल (छवियां/छवि शीर्षक.जेपीजी);
पृष्ठभूमि-स्थिति: मध्य शीर्ष;
बैकग्राउंड-रिपीट: नो-रिपीट;
यदि पहले दो मापदंडों के साथ सब कुछ स्पष्ट है, तो अंतिम दो को कवर करने की आवश्यकता है। तीसरा फ़ंक्शन आपको साइट के केंद्र में छवि को ठीक करने की अनुमति देता है, और अंतिम पैरामीटर संपूर्ण पृष्ठ संरचना में इसकी पुनरावृत्ति को रोकता है।
यूकोज़ वेबसाइटों पर पृष्ठभूमि बदलना
किसी वेबसाइट के लिए पृष्ठभूमि बनाने के उन तरीकों का उपयोग किया जा सकता है विभिन्न प्रणालियाँसाइट प्रबंधन, लेकिन साइटों पर नहीं - ucoz। यूकोज़ वेबसाइट का बैकग्राउंड बदलने के लिए आपको साइट कंट्रोल पैनल पर जाना होगा "अभिकल्पना प्रबंधन", और फिर अंदर "संपादन टेम्पलेट्स".
अब आपको स्टाइल शीट (सीएसएस) खोलने की जरूरत है, लाइन ढूंढें "शरीर"और पैरामीटर "पृष्ठभूमि". इसके बाद, आपको लिंक को कॉपी करना होगा, इसे अपने इंटरनेट ब्राउज़र में पेस्ट करना होगा और आपके पास उस तस्वीर तक पहुंच होगी जो पृष्ठभूमि थी।
नई पृष्ठभूमि का उपयोग करने के लिए, आपको बस इसे अपलोड करना होगा फ़ाइल मैनेजर. साथ ही, सुनिश्चित करें कि नई पृष्ठभूमि छवि का नाम परिवर्तन से पहले जैसा ही है। अपना काम सहेजें और किए गए काम को देखने के लिए वेबसाइट पर जाएं।
साइट की पृष्ठभूमि को HTML में बदलना
यदि आप किसी छवि का उपयोग करके HTML साइट पर पृष्ठभूमि बनाना चाहते हैं, तो बस कोड में पंक्ति दर्ज करें:
और यदि आप रंग का उपयोग करके साइट का बैकग्राउंड बनाना चाहते हैं, तो लाइन इस तरह दिखनी चाहिए:
इससे हमारी कहानी समाप्त होती है। अब आप जानते हैं कि किसी वेबसाइट के लिए बैकग्राउंड कैसे बनाया जाता है। शुभ परियोजनाएँ!
आधुनिक ब्राउज़र आपको किसी तत्व में मनमानी संख्या में पृष्ठभूमि छवियां जोड़ने की अनुमति देते हैं, प्रत्येक पृष्ठभूमि के मापदंडों को अल्पविराम से अलग करके सूचीबद्ध करते हैं। यह सार्वभौमिक पृष्ठभूमि संपत्ति का उपयोग करने और इसके लिए पहले एक पृष्ठभूमि निर्दिष्ट करने और दूसरे को अल्पविराम से अलग करने के लिए पर्याप्त है।
पृष्ठभूमि को विंडो की पूरी चौड़ाई तक कैसे फैलाएँ?
पृष्ठभूमि को स्केल करने के लिए, पृष्ठभूमि-आकार संपत्ति का उपयोग करें, इसका मान 100% पर सेट करें, फिर पृष्ठभूमि ब्राउज़र विंडो की पूरी चौड़ाई पर कब्जा कर लेगी। ब्राउज़र के पुराने संस्करणों के लिए, आपको उपसर्गों के साथ विशिष्ट गुणों का उपयोग करना चाहिए, जैसा कि उदाहरण 1 में दिखाया गया है।
वेब पेज पर पृष्ठभूमि छवि कैसे जोड़ें?
किसी वेब पेज पर पृष्ठभूमि छवि जोड़ने के लिए, पृष्ठभूमि शैली संपत्ति के यूआरएल मान के भीतर छवि का पथ सेट करें, जो बदले में बॉडी चयनकर्ता में जोड़ा जाता है।
क्या एनिमेटेड पृष्ठभूमि बनाना संभव है?
एनिमेशन एक काफी शक्तिशाली तकनीक है जो किसी भी दस्तावेज़ को जीवंत बना सकती है, इसलिए इसमें कोई आश्चर्य की बात नहीं है कि फ्लैश तकनीक, जो वेब पेजों पर कार्टून और उस पर इंटरैक्टिव जोड़ती है, बेहद लोकप्रिय हो गई है। ग्राफ़िक प्रारूप GIF क्रमिक रूप से फ़्रेम बदलकर सरल एनीमेशन का भी समर्थन करता है। इसलिए, इस प्रारूप में एक छवि का उपयोग करके, न केवल व्यक्तिगत छवियों को एनिमेट करना संभव है, बल्कि एक वेब पेज या एक विशिष्ट तत्व की पृष्ठभूमि भी।
सबसे पहले आपको जीआईएफ प्रारूप में एक एनिमेटेड छवि बनाने की आवश्यकता होगी, जिसके लिए आप प्रोग्राम का उपयोग कर सकते हैं एडोब फोटोशॉपया इस प्रयोजन के लिए अन्य उपयुक्त। तैयार एनिमेटेड फ़ाइलों की लाइब्रेरी भी हैं जिनका उपयोग पृष्ठभूमि छवि के रूप में किया जा सकता है। इसके बाद, छवि को पृष्ठभूमि शैली संपत्ति का उपयोग करके पृष्ठभूमि के रूप में जोड़ा जाता है, जैसा कि उदाहरण 1 में दिखाया गया है।
पृष्ठ के निचले दाएं कोने में पृष्ठभूमि छवि कैसे लगाएं?
पृष्ठ पर पृष्ठभूमि छवि की स्थिति को नियंत्रित करने के लिए, पृष्ठभूमि-स्थिति शैली संपत्ति का उपयोग किया जाता है, यह एक साथ छवि के क्षैतिज और ऊर्ध्वाधर निर्देशांक सेट करता है। पृष्ठभूमि छवि को दोहराने को रद्द करने के लिए, no-repeat मान के साथ पृष्ठभूमि-स्थिति संपत्ति का उपयोग करें।
बैकग्राउंड को दोबारा न दोहराने वाला कैसे बनाएं?
डिफ़ॉल्ट रूप से, पृष्ठभूमि छवि क्षैतिज और लंबवत रूप से दोहराई जाती है, जिससे वेब पेज के पूरे क्षेत्र में एक मोज़ेक बनता है। हालाँकि, इस पृष्ठभूमि व्यवहार की हमेशा आवश्यकता नहीं होती है, विशेषकर एकल छवि के मामले में मदद मिलेगीपृष्ठभूमि शैली संपत्ति में एक नो-रिपीट मान जोड़ा गया।
मैं पृष्ठभूमि को केवल लंबवत रूप से कैसे दोहरा सकता हूँ?
पृष्ठभूमि पुनरावृत्ति की आवश्यकता आमतौर पर सजावटी रेखाएं या ग्रेडिएंट बनाने के लिए होती है जो वेब पेज तत्व या विंडो की ऊंचाई से जुड़ी होती हैं। ऐसे मामलों में, पृष्ठभूमि को लंबवत रूप से दोहराने से तत्वों के आकार की परवाह किए बिना एक सुसंगत तस्वीर मिलती है। केवल सबसे पहले आपको यह सुनिश्चित करना चाहिए कि पृष्ठभूमि छवि बिना सीम के दोहराई गई है।
संक्षिप्त जानकारी
सीएसएस संस्करण
मान
यूआरएल मान का पथ है ग्राफ़िक फ़ाइल, जो url() निर्माण के अंदर निर्दिष्ट है। फ़ाइल का पथ या तो उद्धरण चिह्नों (दोहरे या एकल) में या उनके बिना लिखा जा सकता है।कोई नहीं तत्व के लिए पृष्ठभूमि छवि को अक्षम करता है।
HTML5 CSS2.1 IE Cr Op Sa Fx
पृष्ठभूमि छवि
ऑब्जेक्ट मॉडल
document.getElementById("elementID").style.backgroundImageब्राउज़र्स
इंटरनेट एक्सप्लोरर
संस्करण 7.0 तक और इसमें शामिल, पृष्ठभूमि को उस तत्व की सीमा के अंदर लागू करता है जिसमें hasLayout प्रॉपर्टी सेट है। यदि तत्व में hasLayout नहीं है, तो पृष्ठभूमि-छवि संपत्ति तत्व की सीमाओं का सम्मान करेगी, जैसा कि विनिर्देश में निर्दिष्ट है। यदि बॉर्डर ठोस होने के बजाय धराशायी या बिंदीदार हों तो प्रदर्शन में अंतर ध्यान देने योग्य होगा।
यदि तत्व को स्क्रॉल या ऑटो पर सेट किया गया है, तो पृष्ठभूमि स्क्रॉल होने पर इंटरनेट एक्सप्लोरर 8 में एक-पिक्सेल लंबवत विलंब होगा।
कोई नहीं तत्व के लिए पृष्ठभूमि छवि को अक्षम करता है।
| 1 | 2 | 3 |
), फिर क्रोम, सफारी, आईओएस इसे विनिर्देश द्वारा निर्धारित नहीं, अर्थात् प्रत्येक सेल के लिए अलग से प्रदर्शित करते हैं। जबकि ब्राउज़र को पूरी पंक्ति के लिए एक ठोस पृष्ठभूमि दिखानी चाहिए। उदाहरण 2 त्रुटि दर्शाने वाला कोड दिखाता है। टीआर के लिए पृष्ठभूमिपरिणाम यह उदाहरणवी क्रोम ब्राउज़रचित्र में दिखाया गया है 1.
इंटरनेट ब्राउज़र
एक्सप्लोरर, ओपेरा और फ़ायरफ़ॉक्स लाइन के लिए पृष्ठभूमि को सही ढंग से प्रदर्शित करते हैं (चित्र 2)।