अपनी खुद की निश्चित पृष्ठभूमि वॉटरमार्क बनाना

अगर तुम हो एक वेबसाइट डिजाइन करना, आपको वेब पेज पर एक निश्चित पृष्ठभूमि छवि या वॉटरमार्क बनाने का तरीका सीखने में रुचि हो सकती है। यह एक सामान्य डिजाइन उपचार है जो काफी समय से ऑनलाइन लोकप्रिय है। आपके वेब डिज़ाइन बैग में ट्रिक्स का होना एक आसान प्रभाव है।

यदि आपने इसे पहले नहीं किया है या भाग्य के बिना पहले इसे आजमाया है, तो यह प्रक्रिया आपको डराने वाली लग सकती है, लेकिन वास्तव में यह बहुत कठिन नहीं है। इस संक्षिप्त ट्यूटोरियल के साथ, आपको सीएसएस का उपयोग करके कुछ ही मिनटों में तकनीक सीखने के लिए आवश्यक जानकारी मिल जाएगी।

शुरू करना

पृष्ठभूमि चित्र या वॉटरमार्क (जो वास्तव में बहुत हल्की पृष्ठभूमि छवियां हैं) का मुद्रित डिज़ाइन में एक इतिहास है। दस्तावेज़ों में लंबे समय से वॉटरमार्क शामिल हैं ताकि उन्हें कॉपी होने से रोका जा सके। इसके अतिरिक्त, कई फ्लायर और ब्रोशर मुद्रित टुकड़े के डिजाइन के हिस्से के रूप में बड़ी पृष्ठभूमि छवियों का उपयोग करते हैं। वेब डिज़ाइन में प्रिंट से लंबे समय से उधार ली गई शैलियाँ हैं और पृष्ठभूमि चित्र इन उधार शैलियों में से एक हैं।

निम्नलिखित तीन का उपयोग करके ये बड़ी पृष्ठभूमि छवियां बनाना आसान है सीएसएस शैली गुण:

• पृष्ठभूमि छवि
• पृष्ठभूमि दोहराएँ
• पृष्ठभूमि संलग्न
• पृष्ठभूमि-आकार

पृष्ठभूमि छवि

आप उस छवि को परिभाषित करने के लिए पृष्ठभूमि-छवि का उपयोग करेंगे जिसका उपयोग आपके वॉटरमार्क के रूप में किया जाएगा। यह शैली केवल आपकी साइट पर मौजूद छवि को लोड करने के लिए फ़ाइल पथ का उपयोग करती है, संभवतः नाम की निर्देशिका में इमेजिस.

बैकग्राउंड-इमेज: url(/images/page-background.jpg);

यह महत्वपूर्ण है कि छवि स्वयं सामान्य छवि की तुलना में हल्की या अधिक पारदर्शी हो। यह पैदा करेगा कि "वाटर-मार्क" देखो जिसमें एक अर्ध-पारदर्शी छवि पाठ, ग्राफिक्स और वेब पेज के अन्य मुख्य तत्वों के पीछे है। इस चरण के बिना, पृष्ठभूमि छवि आपके पृष्ठ की जानकारी के साथ प्रतिस्पर्धा करेगी और इसे पढ़ना मुश्किल बना देगी।

आप किसी भी एडिटिंग प्रोग्राम में बैकग्राउंड इमेज को एडजस्ट कर सकते हैं जैसे एडोब फोटोशॉप.

पृष्ठभूमि दोहराएँ

बैकग्राउंड-रिपीट प्रॉपर्टी आगे आती है। यदि आप चाहते हैं कि आपकी छवि एक बड़ा वॉटरमार्क-शैली ग्राफिक हो, तो आप इस संपत्ति का उपयोग उस छवि को केवल एक बार प्रदर्शित करने के लिए करेंगे।

बैकग्राउंड-रिपीट: नो-रिपीट;

के बिना कोई दोहराने संपत्ति, डिफ़ॉल्ट यह है कि छवि पृष्ठ पर बार-बार दोहराई जाएगी। अधिकांश आधुनिक वेब पेज डिज़ाइनों में यह अवांछनीय है, इसलिए इस शैली को आपके सीएसएस में आवश्यक माना जाना चाहिए।

पृष्ठभूमि संलग्न

बैकग्राउंड-अटैचमेंट एक ऐसी संपत्ति है जिसके बारे में कई वेब डिजाइनर भूल जाते हैं। जब आप इसका उपयोग करते हैं तो इसका उपयोग करने से आपकी पृष्ठभूमि छवि स्थिर रहती है तय संपत्ति। यह वह है जो उस छवि को वॉटरमार्क में बदल देता है जो पृष्ठ पर तय होता है।

इस संपत्ति के लिए डिफ़ॉल्ट मान है स्क्रॉल. यदि आप पृष्ठभूमि-अनुलग्नक मान निर्दिष्ट नहीं करते हैं, तो शेष पृष्ठ के साथ पृष्ठभूमि स्क्रॉल हो जाएगी।

पृष्ठभूमि-लगाव: निश्चित;

पृष्ठभूमि-आकार

पृष्ठभूमि-आकार एक नई सीएसएस संपत्ति है। यह आपको उस व्यूपोर्ट के आधार पर पृष्ठभूमि का आकार सेट करने की अनुमति देता है जिसमें इसे देखा जा रहा है। यह के लिए बहुत मददगार है उत्तरदायी वेबसाइट जो विभिन्न आकारों में प्रदर्शित होगा विभिन्न उपकरणों पर.

पृष्ठभूमि-आकार: कवर;

इस संपत्ति के लिए आप जिन दो उपयोगी मूल्यों का उपयोग कर सकते हैं उनमें शामिल हैं:

• आवरण - पृष्ठभूमि को मापता है ताकि या तो पूरी चौड़ाई या पूरी ऊंचाई दिखाई दे। इसका मतलब है कि छवि के कुछ हिस्से स्क्रीन पर दिखाई नहीं दे सकते हैं, लेकिन पूरे क्षेत्र को कवर किया जाएगा।
• होते हैं - छवि को स्केल करता है ताकि स्टाइल किए जा रहे क्षेत्र में पूरी चौड़ाई और ऊंचाई दोनों दिखाई दें। छवि को काटा नहीं गया है, लेकिन नकारात्मक पक्ष यह है कि क्षेत्र के कुछ हिस्सों को छवि द्वारा कवर नहीं किया जा सकता है।

अपने पेज में CSS जोड़ना

उपरोक्त गुणों और उनके मूल्यों को समझने के बाद, आप इन शैलियों को अपनी वेबसाइट में जोड़ सकते हैं।

यदि आप एकल-पृष्ठ साइट बना रहे हैं तो निम्नलिखित को अपने वेब पेज के HEAD में जोड़ें। यदि आप एक बहु-पृष्ठ साइट बना रहे हैं और बाहरी शीट की शक्ति का लाभ उठाना चाहते हैं, तो इसे बाहरी स्टाइल शीट की CSS शैलियों में जोड़ें।

अपनी साइट के लिए प्रासंगिक विशिष्ट फ़ाइल नाम और फ़ाइल पथ से मेल खाने के लिए अपनी पृष्ठभूमि छवि का URL बदलें। अपने डिज़ाइन में फिट होने के लिए कोई अन्य उपयुक्त परिवर्तन करें और आपके पास वॉटरमार्क होगा।

आप स्थिति भी निर्दिष्ट कर सकते हैं

यदि आप वॉटरमार्क को अपने वेब पेज पर किसी विशिष्ट स्थान पर रखना चाहते हैं, तो आप ऐसा भी कर सकते हैं। उदाहरण के लिए, आप पृष्ठ के मध्य में या शायद निचले कोने में वॉटरमार्क चाहते हैं, शीर्ष कोने के विपरीत, जो कि डिफ़ॉल्ट है।

ऐसा करने के लिए, अपनी शैली में पृष्ठभूमि-स्थिति गुण जोड़ें। यह छवि को ठीक उसी स्थान पर रखेगा जहां आप इसे दिखाना चाहते हैं। आप उस स्थिति प्रभाव को प्राप्त करने के लिए पिक्सेल मान, प्रतिशत या संरेखण का उपयोग कर सकते हैं।

पृष्ठभूमि-स्थिति: केंद्र;