सीएसएस पृष्ठभूमि स्थिति:यह क्या है और यह कैसे काम करता है?

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

सिंटैक्स

CSS चयनकर्ता के अंदर पृष्ठभूमि-स्थिति गुण के लिए सिंटैक्स इस प्रकार है:

पृष्ठभूमि-स्थिति पर मान घोषित करने के दो अलग-अलग तरीके हैं:

• कई कीवर्ड युग्म मान हैं जिनका उपयोग किया जा सकता है:
  • ऊपर बाएं
  • बाएं केंद्र
  • नीचे बाएं
  • दाएं शीर्ष
  • दायां केंद्र
  • दाएं नीचे
  • केंद्र शीर्ष
  • केंद्र केंद्र
  • बीच में नीचे

पहला शब्द क्षैतिज, या x, अक्ष का प्रतिनिधित्व करता है। दूसरा शब्द लंबवत, या y, अक्ष का प्रतिनिधित्व करता है। यदि केवल एक मान घोषित किया जाता है, तो y-मान स्वचालित रूप से 'केंद्र' पर सेट हो जाता है।

• x%, y%:

पहले विकल्प के समान, आप अधिकतम दो मान निर्दिष्ट कर सकते हैं:एक x-अक्ष पर क्षैतिज स्थिति के लिए, एक y-अक्ष पर लंबवत स्थिति के लिए। यदि केवल एक मान दिया जाता है, तो y% मान को y-अक्ष पर छवि को केन्द्रित करने के लिए 50% पर सेट किया जाता है। लेफ्ट टॉप 0% 0%, टॉप राइट 100% 0%, बॉटम लेफ्ट 100% 0% और बॉटम राइट 100% 100% है।

• xpos, ypos (px/rem/em/pt में):

पिछले दो विकल्पों के समान, लेकिन संख्याएं प्रतिशत के बजाय सीएसएस इकाइयों में दी गई हैं (हालांकि आप चाहें तो प्रतिशत और रेम/एम/पीएक्स/पीटी मिला सकते हैं)। यदि कोई दूसरा मान नहीं दिया गया है, तो ypos 50% पर सेट है;

यहां कुछ उदाहरण दिए गए हैं जो पहले विकल्प का उपयोग करके विभिन्न मान दिखाते हैं:

ऊपर बाएं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

    <शीर्षक>ऊपरी बायां <शैली> बॉडी { बैकग्राउंड:url ("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); बैकग्राउंड-रिपीट:नो-रिपीट; पृष्ठभूमि-आकार:कवर; पृष्ठभूमि-लगाव:निश्चित; पृष्ठभूमि-स्थिति:ऊपर बाएँ; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:रो रैप; } div {ऊंचाई:200px; चौड़ाई:25%; पृष्ठभूमि:पारदर्शी; सीमा:5px डबल आइवरी; मार्जिन:20px; } #पाठ्य-ब्लॉक {पृष्ठभूमि:हाथी दांत; सीमा:5px डबल काला; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; फ़ॉन्ट-आकार:2rem; }   
 
 
 
 
 
 
 
 
 ऊपर बाईं ओर 
 
 
 
 
 
 
 
 
  

मध्य दाएं:

    <शीर्षक>दाएं केंद्र <शैली> बॉडी { बैकग्राउंड:url ("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); बैकग्राउंड-रिपीट:नो-रिपीट; पृष्ठभूमि-आकार:कवर; पृष्ठभूमि-लगाव:निश्चित; पृष्ठभूमि-स्थिति:केंद्र दाईं ओर; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:रो रैप; } div {ऊंचाई:200px; चौड़ाई:25%; पृष्ठभूमि:पारदर्शी; सीमा:5px डबल आइवरी; मार्जिन:20px; } #पाठ्य-ब्लॉक {पृष्ठभूमि:हाथी दांत; सीमा:5px डबल काला; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; फ़ॉन्ट-आकार:2rem; }   
 
 
 
 
 
 
 
 
 मध्य दाएं 
 
 
 
 
 
 
 
 
  

नीचे बाएँ:

    <शीर्षक>नीचे बायां <शैली> बॉडी { बैकग्राउंड:url ("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); बैकग्राउंड-रिपीट:नो-रिपीट; पृष्ठभूमि-आकार:कवर; पृष्ठभूमि-लगाव:निश्चित; पृष्ठभूमि-स्थिति:नीचे बाएँ; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:रो रैप; } div {ऊंचाई:200px; चौड़ाई:25%; पृष्ठभूमि:पारदर्शी; सीमा:5px डबल आइवरी; मार्जिन:20px; } #पाठ्य-ब्लॉक {पृष्ठभूमि:हाथी दांत; सीमा:5px डबल काला; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; फ़ॉन्ट-आकार:2rem; }   
 
 
 
 
 
 
 
 
 नीचे बाईं ओर 
 
 
 
 
 
 
 
 
  

निष्कर्ष

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