यह संक्षिप्त पाठ इस बारे में होगा कि अपनी वेबसाइट पर (या एक पृष्ठ वाले पृष्ठ पर) एक सुंदर निश्चित पृष्ठभूमि कैसे बनाई जाए जो उपयोगकर्ता द्वारा पृष्ठ स्क्रॉल करने पर एक छवि से दूसरी छवि में आसानी से प्रवाहित हो। सीएसएस में यह संपत्ति है बैकग्राउंड-अटैचमेंट: फिक्स्ड, जो आपको ठीक करने की अनुमति देता है पृष्ठभूमि छवि. यानी जब आप पेज को स्क्रॉल करेंगे तो वह पेज के साथ स्क्रॉल नहीं होगा। लेकिन CSS में ऐसी कोई संपत्ति नहीं है जो हमें स्क्रॉल करते समय छवियों को बदलने की अनुमति दे, इसलिए हम जावास्क्रिप्ट का उपयोग करेंगे।
हो सकता है कि आप समझ न सकें कि मैं किस बारे में लिख रहा हूं, इसलिए डेमो देखें और आप स्वयं यह सुंदर प्रभाव देखेंगे:
हम उस पृष्ठ की HTML संरचना को परिभाषित करके शुरुआत करेंगे जिसके लिए हम यह प्रभाव बना रहे हैं:
हम ब्लॉक की ऊंचाई यथासंभव ऊंची बनाते हैं। यानी यूजर की ब्राउजर विंडो की ऊंचाई.
मैंने कुछ संपत्तियों पर टिप्पणी की, मुझे लगता है कि यह स्पष्ट है कि कौन सी संपत्ति किसके लिए जिम्मेदार है। यदि बिल्कुल नहीं, तो टिप्पणियों में लिखें! 🙂
बस इतना ही। यह एक सुंदर प्रभाव है, और मुझे लगता है कि इसे अपनी वेबसाइट में सम्मिलित करना कठिन नहीं होगा! मैं आपकी सफलता की कामना करता हूं, यदि आपको इंस्टॉलेशन में कोई समस्या है, तो टिप्पणियों में लिखें :)
पी.एस.: मैंने साइट का डिज़ाइन बदल दिया है। मेरी राय में, यह अधिक आधुनिक और सुविधाजनक है।
स्थापित करते समय, तालिका के नीचे एक निश्चित पृष्ठभूमि छवि होगी जिसमें हमारे पास पाठ और अन्य होंगे उपयोगी जानकारी, निम्नलिखित प्रभाव उत्पन्न होता है: पाठ के साथ किसी तालिका को स्क्रॉल करते समय, उसके नीचे की पृष्ठभूमि गतिहीन रहती है, और तालिका के साथ नहीं चलती है। जैसे यहाँ:
हम एक चित्र चुनते हैं जो हमारी पृष्ठभूमि होगी। इस मामले में, मैं यह तस्वीर लेता हूं (देखने के लिए थंबनेल पर क्लिक करें पूर्ण आकार):
मुख्य भाग (पृष्ठभूमि-छवि: यूआरएल (पृष्ठभूमि छवि पता); पृष्ठभूमि-अनुलग्नक: निश्चित; पृष्ठभूमि-दोहराएँ: कोई दोहराव नहीं; पृष्ठभूमि-स्थिति: शीर्ष;)
इस मामले में, हम पृष्ठभूमि छवि के रूप में एक बड़ी पूर्ण-स्क्रीन छवि लेते हैं (उदाहरण के लिए, 1280 x 1024 px)।
पृष्ठभूमि-छवि: यूआरएल (पृष्ठभूमि छवि पता); - हमारी पृष्ठभूमि छवि का पता 1280 x 1024 px दर्ज करें।
पृष्ठभूमि-लगाव: निश्चित; - हम पृष्ठभूमि को स्थिर अर्थात गतिहीन रहने का निर्देश देते हैं।
बैकग्राउंड-रिपीट: नो-रिपीट; - हम पृष्ठभूमि को पुनरुत्पादन न करने का निर्देश देते हैं।
पृष्ठभूमि-स्थिति: शीर्ष; - पृष्ठभूमि छवि की स्थिति सेट करें: पृष्ठ के शीर्ष किनारे पर सेट करें।
मैंने स्क्रीन के 70% हिस्से पर एक साधारण तालिका बनाई और स्पष्टता के लिए उसमें टेक्स्ट और दो चित्र रखे। पृष्ठ पर हमें यही मिला: (स्थिर पृष्ठभूमि का प्रभाव देखने के लिए, पृष्ठ को ऊपर और नीचे स्क्रॉल करें)।
आइए एक छोटी तस्वीर लगाने का प्रयास करें जो स्वचालित रूप से दोहराई जाएगी और पृष्ठ के पूरे स्थान को भर देगी, जिससे एक पृष्ठभूमि पैटर्न बन जाएगा। यहाँ चित्र है:
साथ ही, हम सीएसएस स्टाइल शीट में निम्नलिखित निर्माण लिखकर पूरी पृष्ठभूमि को ठीक करते हैं:
यहां हम केवल पैरामीटर सेट करते हैं: बैकग्राउंड-अटैचमेंट: फिक्स्ड; - यानी, उन्होंने पृष्ठभूमि छवि को गतिहीन बनाने के लिए ब्राउज़र को एक निर्देश निर्धारित किया। चूंकि हमने चित्र को "गुणा न करने" के लिए नहीं कहा था, इसलिए इसे संपूर्ण स्क्रीन पर गुणा करना चाहिए।
आइए एक तरफ पृष्ठभूमि छवि स्थापित करने का प्रयास करें, और विपरीत तरफ पृष्ठ पर पाठ और चित्रों के साथ एक तालिका रखें ताकि यह पृष्ठभूमि छवि को अवरुद्ध न करे। ऐसा करने के लिए, CSS दस्तावेज़ में निम्नलिखित लिखें:
पृष्ठभूमि:#e0dd8 url (पृष्ठभूमि छवि का पता) - पृष्ठभूमि छवि के नीचे का रंग बेज है, जो छवि के पृष्ठभूमि रंग से मेल खाता है। ऐसा इसलिए किया जाता है ताकि पृष्ठभूमि में हमारी तस्वीर का संक्रमण दिखाई न दे (चित्र स्क्रीन का केवल एक हिस्सा लेता है)।
नो-रिपीट - चित्र गुणा नहीं होता है (मेरे पसंदीदा अमेरिकी अभिनेताओं में से एक - रॉबर्ट डुवैल के साथ एक बड़ी तस्वीर है)।
बायाँ शीर्ष - स्क्रीन के ऊपरी बाएँ किनारे से संरेखित (आप अपनी इच्छानुसार छवि को दाईं ओर और साइट तालिका को बाईं ओर रख सकते हैं। ऐसा करने के लिए, एचटीएमएल दस्तावेज़तालिका में आप लिखेंगे:
इस ट्यूटोरियल में, हम एक प्रतिक्रियाशील पृष्ठभूमि छवि बनाने की तकनीक का विस्तार से अध्ययन करेंगे जो किसी भी रिज़ॉल्यूशन पर ब्राउज़र में पूरे देखने के क्षेत्र पर कब्जा कर लेगी। और हम सीएसएस - पृष्ठभूमि-आकार की संपत्ति का उपयोग करेंगे। जावास्क्रिप्ट के बिना:
उदाहरण
स्रोत डाउनलोड करें
प्रतिक्रियाशील पृष्ठभूमि छवियों का उपयोग करने के उदाहरण
आज, ऐसी साइटें बहुत लोकप्रिय हैं जिनमें पृष्ठभूमि छवि पृष्ठ के संपूर्ण प्रदर्शित क्षेत्र को कवर करती है।
इनमें से कुछ वेबसाइटें नीचे दी गई हैं:
नौकायन सामूहिक
डिजिटल टेलीपैथी
मैरिएन रेस्तरां
यदि आप अपने प्रोजेक्ट में एक समान "लुक" प्राप्त करना चाहते हैं, तो आप सही रास्ते पर हैं।
बुनियादी अवधारणाओं
यहां हमारा गेम प्लान है.
संपूर्ण व्यूपोर्ट को कवर करने के लिए पृष्ठभूमि-आकार संपत्ति का उपयोग करें
सीएसएस पृष्ठभूमि-आकार संपत्ति को कवर पर सेट किया जा सकता है। कवर मान ब्राउज़र को पृष्ठभूमि छवि को लंबाई और चौड़ाई में स्वचालित रूप से और आनुपातिक रूप से स्केल करने का निर्देश देता है ताकि यह व्यूपोर्ट की चौड़ाई/ऊंचाई के बराबर या उससे बड़ा रहे।
मोबाइल उपकरणों के लिए पृष्ठभूमि छवि का छोटा संस्करण प्राप्त करने के लिए मीडिया क्वेरी का उपयोग करना
छोटे स्क्रीन रिज़ॉल्यूशन पर पेज लोडिंग समय को कम करने के लिए, हम पृष्ठभूमि छवि का एक छोटा संस्करण प्राप्त करने के लिए मीडिया क्वेरी का उपयोग करेंगे। लेकिन यह आवश्यक नहीं है और इसे छोड़ा जा सकता है। यह तकनीक इसके बिना भी बढ़िया काम करती है।
लेकिन फिर भी, मोबाइल उपकरणों के लिए पृष्ठभूमि के छोटे संस्करणों का उपयोग करना कोई बुरा विचार नहीं है, और मैं समझाऊंगा कि क्यों।
उदाहरण में जिस छवि का उपयोग किया जाएगा उसका आकार लगभग 5500 x 3600px है।
इस रिज़ॉल्यूशन के साथ, हमें यह फायदा है कि हम वर्तमान में उत्पादित अधिकांश विस्तृत प्रारूप मॉनिटरों पर पूरे देखने के क्षेत्र का कवरेज प्राप्त करते हैं, लेकिन नुकसान छवि आकार का है। यह लगभग 1.7 एमबी है.
केवल पृष्ठभूमि छवि लोड करने के लिए इतनी जगह छोड़ना किसी भी मामले में अच्छा विचार नहीं है, और मोबाइल उपकरणों के मामले में यह बहुत बुरा विचार है। इसके अलावा, कम-रिज़ॉल्यूशन स्क्रीन पर ऐसा रिज़ॉल्यूशन बिल्कुल अनावश्यक है ( मैं आपको इसके बारे में बाद में और बताऊंगा).
इसलिए। आएँ शुरू करें।
एचटीएमएल
नीचे वह सब कुछ है जो आपको मार्कअप से चाहिए:
...आपके पृष्ठ की सामग्री...
हम बॉडी तत्व को एक पृष्ठभूमि छवि प्रदान करेंगे और इस प्रकार पूर्ण पृष्ठभूमि कवरेज प्राप्त करेंगे।
हालाँकि, यह तकनीक किसी भी ब्लॉक तत्व (जैसे div या form) पर काम करेगी। यदि आपके ब्लॉक कंटेनर की चौड़ाई-ऊंचाई गतिशील है, तो पूरे कंटेनर क्षेत्र को भरने के लिए पृष्ठभूमि छवि का आकार भी बदल जाएगा।
सीएसएस
हम शरीर तत्व के गुणों की घोषणा इस प्रकार करते हैं:
मुख्य भाग (/* पृष्ठभूमि छवि का स्थान */ पृष्ठभूमि-छवि: यूआरएल (छवियां/पृष्ठभूमि-फोटो.जेपीजी); /* पृष्ठभूमि छवि क्षैतिज और लंबवत रूप से केंद्रित है */ पृष्ठभूमि-स्थिति: केंद्र केंद्र; /* पृष्ठभूमि दोहराई नहीं जाती है */ बैकग्राउंड-रिपीट: नो-रिपीट; /* बैकग्राउंड को व्यूपोर्ट में तय किया गया है और इसलिए जब सामग्री की ऊंचाई छवि की ऊंचाई से अधिक हो जाती है तो यह हिलता नहीं है */ बैकग्राउंड-अटैचमेंट: फिक्स्ड; /* यह गुण इसका कारण बनता है कंटेनर का आकार बदलने पर स्केल बदलने के लिए पृष्ठभूमि */ पृष्ठभूमि-आकार: कवर; /* पृष्ठभूमि रंग जो पृष्ठभूमि छवि लोड करते समय प्रदर्शित किया जाएगा */ पृष्ठभूमि-रंग: #464646; )
इस सूची में सबसे महत्वपूर्ण मूल्य संपत्ति है:
पृष्ठभूमि-आकार: कवर;
इस पर ध्यान देना उचित है. यहीं पर चमत्कार होता है. यह मान-संपत्ति जोड़ी ब्राउज़र को पृष्ठभूमि छवि को ऐसे अनुपात में स्केल करने का निर्देश देती है ताकि ऊंचाई-चौड़ाई तत्व की ऊंचाई-चौड़ाई के बराबर या उससे अधिक रहे। ( हमारे मामले में यह तत्व- शरीर।)
और यहां संपत्ति-मूल्य जोड़ी के साथ एक अप्रिय स्थिति उत्पन्न होती है। यदि पृष्ठभूमि छवि में बॉडी तत्व की तुलना में कम रिज़ॉल्यूशन है, जो या तो तब हो सकता है जब पृष्ठ उच्च-रिज़ॉल्यूशन स्क्रीन पर प्रदर्शित होता है, या जब आपके पृष्ठ पर बहुत सारी सामग्री होती है, तो ब्राउज़र छवि को फैला देगा।
और जैसा कि आप जानते हैं, जब हम किसी छवि को उसके वास्तविक आकार से आगे खींचते हैं, तो हम छवि गुणवत्ता खो देते हैं ( दूसरे शब्दों में, पिक्सेलेशन प्रकट होता है):
जब किसी छवि को उसके मूल आकार की ओर बढ़ाया जाता है, तो छवि गुणवत्ता कम हो जाती है.
पृष्ठभूमि चुनते समय इस बारे में न भूलें। डेमो में, हम बड़ी स्क्रीन के लिए 5500 x 3600px फोटो का उपयोग कर रहे हैं, इसलिए इस मामले में ऐसा कुछ होने की संभावना नहीं है।
यह सुनिश्चित करने के लिए कि हमारी पृष्ठभूमि केंद्र संरेखित है, हमने निम्नलिखित की घोषणा की:
पृष्ठभूमि-स्थिति: केंद्र केंद्र;
यह स्केलिंग अक्षों को व्यूपोर्ट के केंद्र में सेट कर देगा।
हम यही करेंगे. आइए यह सुनिश्चित करने के लिए बैकग्राउंड-अटैचमेंट प्रॉपर्टी को फिक्स्ड पर सेट करें कि पेज को नीचे स्क्रॉल करने पर भी इमेज अपनी जगह पर बनी रहे:
पृष्ठभूमि-अनुलग्नक: निश्चित;
डेमो उदाहरण में मैंने विकल्प शामिल किया " कुछ सामग्री डाउनलोड करें"ताकि आप पृष्ठ को स्क्रॉल करते समय पृष्ठभूमि के व्यवहार का निरीक्षण कर सकें।
आपको बस डेमो डाउनलोड करना है और पोजिशनिंग गुणों (बैकग्राउंड-अटैचमेंट और बैकग्राउंड-पोजिशन) के साथ थोड़ा प्रयोग करना है और देखना है कि वे पेज और बैकग्राउंड के स्क्रॉलिंग व्यवहार को कैसे प्रभावित करते हैं।
निम्नलिखित संपत्ति मूल्य स्व-व्याख्यात्मक हैं।
सीएसएस आशुलिपि
ऊपर, स्पष्टता के लिए, मैंने सीएसएस गुणों को पूर्ण रूप से परिभाषित किया है।
और संक्षिप्त संस्करण इस प्रकार दिखता है:
मुख्य भाग (पृष्ठभूमि: यूआरएल (पृष्ठभूमि-फोटो.जेपीजी) केंद्र केंद्र कवर नो-रिपीट निश्चित;)
आपको बस यूआरएल मान को अपनी छवि के पथ में बदलना है।
वैकल्पिक: पृष्ठभूमि छवि का छोटा संस्करण प्राप्त करने के लिए मीडिया क्वेरी
कम रिज़ॉल्यूशन वाली स्क्रीन के लिए, हमें छवि रिज़ॉल्यूशन को आनुपातिक रूप से 768 x 505px तक कम करने के लिए फ़ोटोशॉप की आवश्यकता होगी। फ़ाइल का आकार कम करने के लिए मैंने इसे smush.it के माध्यम से भी चलाया। इससे आकार को 1741 से घटाकर 114 किलोबाइट किया जा सका। इससे फ़ाइल का आकार 93% कम हो गया।
मुझे गलत मत समझिए, लेकिन कुछ प्रकार के वेब डिज़ाइन के लिए 114 किलोबाइट अभी भी उपयोग करने के लिए काफी है। और यदि आवश्यक हो तो हम केवल उन 114 किलोबाइट्स को लोड करेंगे, क्योंकि आंकड़ों को देखते हुए, डेस्कटॉप और मोबाइल डिज़ाइन के बीच समझौता होना बाकी है।
और यहाँ मीडिया क्वेरी स्वयं है:
मीडिया क्वेरी का मुख्य हिस्सा max-width: 767px प्रॉपर्टी है, जिसका हमारे मामले में मतलब है कि यदि ब्राउज़र व्यूपोर्ट 767px से बड़ा है, तो एक बड़ी छवि का उपयोग किया जाता है।
इस पद्धति का नकारात्मक पक्ष यह है कि यदि आप ब्राउज़र विंडो का आकार 1200px से 640px (या इसके विपरीत) तक बदलते हैं, तो छोटी या बड़ी छवि लोड होने पर आपको एक टिमटिमाती स्क्रीन दिखाई देगी।
और इसके अलावा, इस तथ्य के कारण कि कुछ मोबाइल डिवाइस उच्च रिज़ॉल्यूशन पर काम कर सकते हैं - उदाहरण के लिए, 1136 x 640px के रिज़ॉल्यूशन के साथ रेटिना डिस्प्ले वाला iPhone 5, एक छोटी छवि बदसूरत दिखेगी।
लगभग हर लोकप्रिय वेबसाइट का स्वरूप अच्छा होता है। वेबसाइट डिज़ाइन का एक महत्वपूर्ण हिस्सा पृष्ठभूमि है, जिसे पृष्ठभूमि भी कहा जाता है, जिसे हम में से प्रत्येक बना या बदल सकता है। इस आर्टिकल में मैं आपको बताऊंगा कि किसी वेबसाइट पर बैकग्राउंड कैसे लगाया जाता है।
वेबसाइटों के लिए एक नई पृष्ठभूमि बनाना
कार्य को पूरा करने के लिए, आप 4 विधियों में से एक का उपयोग कर सकते हैं:
- 1. एक रंग के साथ पृष्ठभूमि
- 2. बनावट के साथ पृष्ठभूमि
- 3. ग्रेडिएंट का उपयोग करके पृष्ठभूमि
- 4. एक बड़ी छवि से पृष्ठभूमि
एक रंग का उपयोग करके पृष्ठभूमि बनाएं
साइट की पृष्ठभूमि बनाने या बदलने के लिए, जिसमें एक रंग होता है, आपको फ़ाइल पर जाना होगा स्टाइल.सीएसएस, जिसमें मान खोजें - बॉडी (यह साइट के मुख्य बॉडी के लिए जिम्मेदार है)। अब आपको पृष्ठभूमि-रंग फ़ंक्शन को पंजीकृत करने की आवश्यकता है यदि यह मौजूद नहीं था और रंग कोड निर्दिष्ट करें। उस स्थिति में जब आपको किसी वेबसाइट के लिए एक सफेद पृष्ठभूमि बनाने की आवश्यकता हो, तो आपको निम्नलिखित कोड लिखना होगा:
पृष्ठभूमि-रंग: #83सी5ई9; (नीली पृष्ठभूमि, उदाहरण के अनुसार)
आप वेबसाइट - (एसटीएम) पर रंगों की पूरी सूची पा सकते हैं। रंग बदलने के लिए, बस कोलन के बाद मान बदलें और अपने प्रयासों का आनंद लें।
बनावट का उपयोग करके पृष्ठभूमि बनाना
यह विधि हाल ही में विशेष रूप से लोकप्रिय रही है, क्योंकि यह आपको साइट के लिए एक सुंदर पृष्ठभूमि बनाने की अनुमति देती है। बनावट सरल लेकिन बहुत सुंदर हो सकती है, यही कारण है कि उनका अक्सर उपयोग किया जाता है। किसी भी बनावट को जोड़ने के लिए, आपको इसे होस्टिंग पर छवि फ़ोल्डर में अपलोड करना होगा जहां आपकी साइट स्थापित है। इसके बाद आपको निम्नलिखित कोड लिखना चाहिए:
पृष्ठभूमि-रंग: #537759;
पृष्ठभूमि-छवि: यूआरएल(छवियां/पैटर्न.पीएनजी);
इस कोड में रंग बनाए रखने के लिए एक परिचित पैरामीटर (यह हरा है) और एक तत्व शामिल है जो हरे रंग की बनावट को जोड़ने के लिए जिम्मेदार है।
ग्रेडिएंट का उपयोग करके पृष्ठभूमि बनाना
सीएसएस फ़ंक्शंस का उपयोग करके कनेक्ट की गई कोई भी छवि क्षैतिज और लंबवत (अक्ष के साथ) दोनों तरह से दोहराई जा सकती है एक्सऔर वाई). यह अवसर हमें अपने हाथों से साइट के लिए कोई भी सरल पृष्ठभूमि बनाने की अनुमति देता है। ऐसा करने के लिए, आपको 1 मेगापिक्सेल चौड़ा एक ग्रेडिएंट बनाना होगा (नीचे दी गई छवि देखें), इसे एक छवि के रूप में सहेजें और अपनी होस्टिंग पर अपलोड करें। इसके बाद, आप आवश्यक कोड लिख सकते हैं, अर्थात्:
पृष्ठभूमि-रंग: #83C5E9;
पृष्ठभूमि-छवि: यूआरएल (छवियां/ग्रेडिएंट.जेपीजी);
बैकग्राउंड-रिपीट: रिपीट-एक्स;
इस सेट में, प्राथमिकता के क्रम में, पृष्ठभूमि रंग के लिए जिम्मेदार एक फ़ंक्शन होता है, जिसका उपयोग हम पुनर्बीमा के लिए करते हैं। इसके बाद, एक पैरामीटर जो ग्रेडिएंट को जोड़ने के लिए जिम्मेदार है और अंत में, एक फ़ंक्शन जो एक्स अक्ष के साथ ग्रेडिएंट को दोहराने के लिए जिम्मेदार है।
वेबसाइट पृष्ठभूमि के लिए एक बड़ी छवि का उपयोग करना
यह विधि दूसरी सबसे लोकप्रिय है, क्योंकि यह आपको पृष्ठभूमि बनाने के लिए विभिन्न चित्रों का उपयोग करने की अनुमति देती है। इस पद्धति को लागू करने के लिए, आपको केवल साइट के छवि फ़ोल्डर में एक बड़ी छवि अपलोड करनी होगी और निम्नलिखित कोड दर्ज करना होगा:
पृष्ठभूमि-रंग: #000000;
पृष्ठभूमि-छवि: यूआरएल (छवियां/छवि शीर्षक.जेपीजी);
पृष्ठभूमि-स्थिति: मध्य शीर्ष;
बैकग्राउंड-रिपीट: नो-रिपीट;
यदि पहले दो मापदंडों के साथ सब कुछ स्पष्ट है, तो अंतिम दो को कवर करने की आवश्यकता है। तीसरा फ़ंक्शन आपको साइट के केंद्र में छवि को ठीक करने की अनुमति देता है, और अंतिम पैरामीटर संपूर्ण पृष्ठ संरचना में इसकी पुनरावृत्ति को रोकता है।
यूकोज़ वेबसाइटों पर पृष्ठभूमि बदलना
किसी साइट के लिए पृष्ठभूमि बनाने के उन तरीकों का उपयोग विभिन्न सामग्री प्रबंधन प्रणालियों पर किया जा सकता है, लेकिन साइटों पर नहीं - ucoz। यूकोज़ वेबसाइट का बैकग्राउंड बदलने के लिए आपको साइट कंट्रोल पैनल पर जाना होगा "अभिकल्पना प्रबंधन", और फिर अंदर "संपादन टेम्पलेट्स".
अब आपको स्टाइल शीट (सीएसएस) खोलने की जरूरत है, लाइन ढूंढें "शरीर"और पैरामीटर "पृष्ठभूमि". इसके बाद, आपको लिंक को कॉपी करना होगा, इसे अपने इंटरनेट ब्राउज़र में पेस्ट करना होगा और आपके पास उस तस्वीर तक पहुंच होगी जो पृष्ठभूमि थी।
नई पृष्ठभूमि का उपयोग करने के लिए, आपको बस इसे फ़ाइल प्रबंधक पर अपलोड करना होगा। साथ ही, सुनिश्चित करें कि नई पृष्ठभूमि छवि का नाम परिवर्तन से पहले जैसा ही है। अपना काम सहेजें और किए गए काम को देखने के लिए वेबसाइट पर जाएं।
साइट की पृष्ठभूमि को HTML में बदलना
यदि आप किसी छवि का उपयोग करके HTML साइट पर पृष्ठभूमि बनाना चाहते हैं, तो बस कोड में पंक्ति दर्ज करें:
और यदि आप रंग का उपयोग करके साइट का बैकग्राउंड बनाना चाहते हैं, तो लाइन इस तरह दिखनी चाहिए:
इससे हमारी कहानी समाप्त होती है। अब आप जानते हैं कि किसी वेबसाइट के लिए बैकग्राउंड कैसे बनाया जाता है। शुभ परियोजनाएँ!
कोई भी कमरा बहुत अच्छा लगेगा यदि उसका फर्श महँगे फ़ारसी कालीन से ढका हो। तो आपकी वेबसाइट ख़राब क्यों है? शायद अब इसके फर्श को एक महँगे, सुंदर हस्तनिर्मित गलीचे से "कवर" करने का समय आ गया है। आइए किसी वेबसाइट के लिए पृष्ठभूमि कैसे बनाएं, इस पर करीब से नज़र डालें:
साइट के लिए पृष्ठभूमि
ऐसा होता है कि पुरानी वेबसाइट का डिज़ाइन उबाऊ हो गया है। और मुझे कुछ नया और स्वादिष्ट चाहिए। और नया डिज़ाइन वैसा ही होगा यदि आप इसे स्वयं बनाते हैं।
लेकिन अपने दम पर किसी संसाधन के संपूर्ण डिज़ाइन को पूरी तरह से बदलना एक धन्यवाद रहित कार्य है। और हर किसी के हाथ इस कार्य के लिए ठीक से प्रशिक्षित नहीं होते हैं। इसलिए, किसी पुराने टेम्पलेट को ताज़ा करने का सबसे आसान तरीका संसाधन या उसकी पृष्ठभूमि छवि का पृष्ठभूमि रंग बदलना है।
किसी वेबसाइट पर पृष्ठभूमि बदलने के कई तरीके हैं। इसके लिए CSS या html की क्षमताओं का उपयोग किया जाता है। लेकिन इन वेब प्रौद्योगिकियों में पृष्ठभूमि के साथ काम करने के लिए कई गुणों का नाम और अनुप्रयोग विधि समान है।
HTML में पृष्ठभूमि के साथ काम करने की मूल बातें
पृष्ठभूमि के रूप में कई तत्वों का उपयोग किया जा सकता है:
- रंग;
- पृष्ठभूमि छवि;
- बनावट छवि.
आइए उनमें से प्रत्येक के उपयोग को अधिक विस्तार से देखें।
किसी साइट के लिए पृष्ठभूमि रंग सेट करने के लिए, शैली विशेषता की पृष्ठभूमि-रंग संपत्ति का उपयोग करें। यानी किसी वेब पेज के लिए मुख्य रंग सेट करने के लिए आपको इसे टैग के अंदर लिखना होगा
. उदाहरण के लिए:
वेबसाइट पृष्ठभूमि #55D52B
हेक्साडेसिमल रंग कोड के अलावा, कीवर्ड या आरजीबी प्रारूप में एक मान समर्थित है। उदाहरण:
वेबसाइट पृष्ठभूमि आरजीबी(23,113,44)
वेबसाइट की पृष्ठभूमि हरी
कीवर्ड का उपयोग करके पृष्ठभूमि का रंग सेट करने में अन्य दो विधियों की तुलना में कई सीमाएँ हैं।
रंग सेट करने के लिए HTML केवल 16 कीवर्ड का समर्थन करता है। यहां उनमें से कुछ हैं: सफेद, लाल, नीला, काला, पीलाऔर दूसरे।
इसलिए, किसी html साइट के लिए पृष्ठभूमि सेट करने के लिए हेक्साडेसिमल या RGB प्रारूप का उपयोग करना बेहतर है।
रंग चयन के अलावा, अन्य अनुकूलन विकल्प उपलब्ध हैं। यदि पृष्ठभूमि-रंग गुण को पारदर्शी पर सेट किया जाता है, तो पृष्ठ की पृष्ठभूमि पारदर्शी हो जाएगी। यह मान डिफ़ॉल्ट रूप से इस प्रॉपर्टी को असाइन किया गया है।
आइए अब किसी साइट के लिए पृष्ठभूमि छवि सेट करने के लिए हाइपरटेक्स्ट भाषा की क्षमताओं को देखें। यह बैकग्राउंड-इमेज प्रॉपर्टी का उपयोग करके किया जा सकता है।
जैसा कि आप कोड से देख सकते हैं, छवि कोष्ठक में निर्दिष्ट यूआरएल पथ के माध्यम से जुड़ी हुई है। लेकिन सभी तस्वीरें इतनी बड़ी नहीं होतीं कि उनका आकार पूरे स्क्रीन क्षेत्र को भर दे। आइए देखें कि छोटी तस्वीर कैसे प्रदर्शित होगी।
मान लीजिए कि हम कविता के बारे में एक वेबसाइट विकसित कर रहे हैं, और हमें पृष्ठभूमि के रूप में पेगासस की एक छवि का उपयोग करने की आवश्यकता है। पंखों वाला घोड़ा कवि के रचनात्मक विचार की स्वतंत्रता को व्यक्त करेगा!
हमें छवि को एक बार स्क्रीन के मध्य में प्रदर्शित करने की आवश्यकता है। लेकिन, दुर्भाग्य से, ब्राउज़र हमारी बुलंद इच्छाओं को नहीं समझता है। और यह साइट की पृष्ठभूमि के लिए एक छोटी छवि प्रदर्शित करता है जितनी बार स्क्रीन क्षेत्र समायोजित कर सकता है:
शायद पंखों वाले चार मुस्कुराते घोड़े कवियों के लिए बहुत अधिक प्रेरणा होंगे। इसलिए, हम अपने पेगासस की क्लोनिंग पर रोक लगाते हैं। हम इसे बैकग्राउंड-रिपीट प्रॉपर्टी का उपयोग करके करते हैं। संभावित मान:
- रिपीट-एक्स - पृष्ठभूमि छवि को क्षैतिज रूप से दोहराएं;
- रिपीट-वाई - लंबवत;
- दोहराएँ - दोनों अक्षों पर;
- दोहराना नहीं - दोहराव निषिद्ध है।
सूचीबद्ध विकल्पों में से, हम अंतिम में रुचि रखते हैं। साइट की पृष्ठभूमि बदलने से पहले, हम इसे अपने कोड में उपयोग करते हैं:
लेकिन, निःसंदेह, यह बेहतर होगा यदि हमारा फ़्लायर स्क्रीन के मध्य में स्थित हो। पृष्ठभूमि-स्थिति गुण पृष्ठ पर पृष्ठभूमि छवि की स्थिति निर्धारित करने के लिए सटीक रूप से अभिप्रेत है। आप कई तरीकों से स्थान निर्देशांक सेट कर सकते हैं:
- कीवर्ड ( ऊपर, नीचे, मध्य, बाएँ, दाएँ);
- प्रतिशत - गिनती ऊपरी बाएँ कोने से शुरू होती है;
- माप की इकाइयों (पिक्सेल) में.
आइए सबसे सरल केन्द्रीकरण विकल्प का उपयोग करें:
ऐसा होता है कि स्क्रॉल करते समय आपको किसी चित्र की स्थिति ठीक करने की आवश्यकता होती है। इसलिए, किसी छवि को साइट की पृष्ठभूमि के रूप में बनाने से पहले, विशेष संपत्ति पृष्ठभूमि-अटैचमेंट का उपयोग करें। यह जो मान स्वीकार करता है वे हैं:
हमें अंतिम मान चाहिए. अब हमारा उदाहरण कोड इस तरह दिखेगा:
वेबसाइट बनावट पृष्ठभूमि
पहले उदाहरण में हमने पृष्ठभूमि के लिए एक बड़े और सुंदर रेगिस्तानी परिदृश्य का उपयोग किया। लेकिन ऐसी खूबसूरती के लिए आपको पूरी कीमत चुकानी होगी। उच्च गुणवत्ता में बनाई गई छवि का वजन कई मेगाबाइट तक पहुंच सकता है।
यह वॉल्यूम किसी भी तरह से हाई-स्पीड इंटरनेट कनेक्शन वाले ब्राउज़र की पेज लोडिंग गति को प्रभावित नहीं करता है। लेकिन मोबाइल इंटरनेट के बारे में क्या, इसका उपयोग करते समय कई "मीटर" लोड करने में बहुत समय लगेगा?
इन सभी समस्याओं को बनावटी पृष्ठभूमि की मदद से हल किया जाता है। यह बनावट पैटर्न के रूप में एक छोटी छवि का उपयोग करता है। भले ही इसे कई बार दोहराया जाए, ड्राइंग केवल एक बार ही लोड होती है।
