सीएसएस के साथ तकनीक का निष्पादन करें
यदि आप किसी वेबसाइट को डिज़ाइन कर रहे हैं, तो आपको वेब पेज पर एक निश्चित पृष्ठभूमि छवि या वॉटरमार्क बनाने का तरीका सीखने में रुचि हो सकती है। यह एक आम डिजाइन उपचार है जो काफी समय से ऑनलाइन लोकप्रिय रहा है। यह आपके वेब डिज़ाइन बैग में चाल का एक आसान प्रभाव है।
यदि आपने पहले ऐसा नहीं किया है या पहले भाग्य के बिना कोशिश की है, तो प्रक्रिया डरावनी प्रतीत हो सकती है, लेकिन वास्तव में यह वास्तव में बहुत मुश्किल नहीं है। इस संक्षिप्त ट्यूटोरियल के साथ, आपको सीएसएस का उपयोग करके मिनटों के मामले में तकनीक को मास्टर करने के लिए आवश्यक जानकारी मिल जाएगी।
शुरू करना
पृष्ठभूमि छवियों या वॉटरमार्क (जो वास्तव में बहुत ही हल्की पृष्ठभूमि छवियां हैं) मुद्रित डिज़ाइन में एक इतिहास है। दस्तावेजों को प्रतिलिपि बनाने से रोकने के लिए उन पर वॉटरमार्क शामिल हैं। इसके अतिरिक्त, मुद्रित टुकड़े के लिए डिजाइन के हिस्से के रूप में कई फ्लायर और ब्रोशर बड़ी पृष्ठभूमि छवियों का उपयोग करते हैं। वेब डिज़ाइन में लंबे समय से उधार ली गई शैलियों प्रिंट और पृष्ठभूमि छवियों से उधार ली गई शैलियों में से एक हैं।
निम्नलिखित तीन सीएसएस शैली गुणों का उपयोग करके इन बड़ी पृष्ठभूमि छवियों को बनाना आसान है:
- पृष्ठभूमि छवि
- पृष्ठभूमि दोहराएँ
- पृष्ठभूमि संलग्न
- पृष्ठभूमि आकार
पृष्ठभूमि छवि
आप छवि को परिभाषित करने के लिए पृष्ठभूमि-छवि का उपयोग करेंगे जो आपके वॉटरमार्क के रूप में उपयोग किया जाएगा। यह शैली आपकी साइट पर मौजूद एक छवि को लोड करने के लिए फ़ाइल पथ का उपयोग करती है, संभवतः "छवियों" नामक निर्देशिका में।
पृष्ठभूमि-छवि: यूआरएल (/images/page-background.jpg);
यह महत्वपूर्ण है कि छवि सामान्य छवि की तुलना में हल्का या अधिक पारदर्शी हो। यह उस "वॉटरमार्क" को बनाएगा जिसमें एक अर्द्ध पारदर्शी छवि टेक्स्ट, ग्राफिक्स और वेब पेज के अन्य मुख्य तत्वों के पीछे है। इस चरण के बिना, पृष्ठभूमि छवि आपके पृष्ठ की जानकारी के साथ प्रतिस्पर्धा करेगी और इसे पढ़ने में मुश्किल होगी।
आप Adobe Photoshop जैसे किसी भी संपादन प्रोग्राम में पृष्ठभूमि छवि को समायोजित कर सकते हैं।
पृष्ठभूमि दोहराएँ
पृष्ठभूमि-दोहराना संपत्ति अगले आता है। यदि आप अपनी छवि को एक बड़ा वॉटरमार्क-शैली ग्राफ़िक बनाना चाहते हैं, तो आप इस प्रॉपर्टी का उपयोग केवल उस छवि को प्रदर्शित करने के लिए करेंगे।
पृष्ठभूमि दोहराना: दोहराना नहीं;
"नो-दोहराना" संपत्ति के बिना, डिफ़ॉल्ट यह है कि छवि पृष्ठ पर बार-बार दोहराएगी। यह अधिकांश आधुनिक वेब पेज डिज़ाइनों में अवांछनीय है, इसलिए इस शैली को आपके सीएसएस में आवश्यक माना जाना चाहिए।
पृष्ठभूमि संलग्न
पृष्ठभूमि-अनुलग्नक एक ऐसी संपत्ति है जो कई वेब डिज़ाइनर भूल जाते हैं। जब आप "निश्चित" संपत्ति का उपयोग करते हैं तो इसका उपयोग करके आपकी पृष्ठभूमि छवि को निश्चित रूप से ठीक किया जाता है। यह उस छवि को उस वॉटरमार्क में बदल देता है जो पृष्ठ पर तय किया गया है।
इस संपत्ति के लिए डिफ़ॉल्ट मान "स्क्रॉल" है। यदि आप पृष्ठभूमि-अनुलग्नक मान निर्दिष्ट नहीं करते हैं, तो पृष्ठभूमि शेष पृष्ठ के साथ स्क्रॉल होगी।
पृष्ठभूमि-लगाव: तय;
पृष्ठभूमि आकार
पृष्ठभूमि आकार एक नई सीएसएस संपत्ति है। यह आपको उस व्यूपोर्ट के आधार पर पृष्ठभूमि का आकार सेट करने की अनुमति देता है जिसमें इसे देखा जा रहा है। यह उत्तरदायी वेबसाइटों के लिए बहुत उपयोगी है जो विभिन्न उपकरणों पर विभिन्न आकारों पर प्रदर्शित होंगे।
पृष्ठभूमि आकार: कवर;
इस संपत्ति के लिए आप उपयोग कर सकते हैं कि दो सहायक मूल्यों में शामिल हैं:
- कवर - पृष्ठभूमि को स्केल करता है ताकि पूर्ण चौड़ाई या पूर्ण ऊंचाई दिखाई दे। इसका मतलब है कि छवि के कुछ हिस्सों स्क्रीन पर दिखाई नहीं दे सकते हैं लेकिन पूरे क्षेत्र को कवर किया जाएगा।
- इसमें शामिल है - छवि को स्केल करता है ताकि पूरे चौड़ाई और ऊंचाई दोनों को स्टाइल में दिखाया जा सके। छवि काट नहीं है, लेकिन नकारात्मकता यह है कि क्षेत्र के कुछ हिस्सों को छवि द्वारा कवर नहीं किया जा सकता है।
अपने पृष्ठ पर सीएसएस जोड़ना
उपरोक्त गुणों और उनके मूल्यों को समझने के बाद, आप इन शैलियों को अपनी वेबसाइट पर जोड़ सकते हैं।
यदि आप एकल पृष्ठ साइट बना रहे हैं तो अपने वेब पेज के HEAD में निम्नलिखित जोड़ें। यदि आप बहु-पृष्ठ साइट बना रहे हैं और बाहरी शीट की शक्ति का लाभ उठाना चाहते हैं तो इसे बाहरी स्टाइल शीट की सीएसएस शैलियों में जोड़ें।