वेब डेवलपर्स CSS background-position प्रॉपर्टी का उपयोग तब करते हैं जब उन्हें उस बैकग्राउंड इमेज की शुरुआती स्थिति को एडजस्ट करने की आवश्यकता होती है जिस पर वे काम कर रहे हैं। इस लेख में, हम background-position प्रॉपर्टी पर एक नज़र डालेंगे और इसे कैसे एडजस्ट करें ताकि आपकी इमेज की स्थिति बदल जाए।
सिंटैक्स
CSS सेलेक्टर के अंदर background-position प्रॉपर्टी का सिंटैक्स इस प्रकार है:
background-position: value
background-position पर वैल्यू घोषित करने के कुछ अलग तरीके हैं:
- कई कीवर्ड पेयर वैल्यूज हैं जिनका उपयोग किया जा सकता है:
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
पहला शब्द हॉरिजॉन्टल, या x, एक्सिस को दर्शाता है। दूसरा शब्द वर्टिकल, या y, एक्सिस को दर्शाता है। यदि केवल एक वैल्यू घोषित की जाती है, तो y-वैल्यू स्वचालित रूप से 'center' पर सेट हो जाती है।
- x%, y%:
पहले विकल्प के समान, आप दो वैल्यूज तक निर्दिष्ट कर सकते हैं: एक x-एक्सिस पर हॉरिजॉन्टल पोजिशन के लिए, एक y-एक्सिस पर वर्टिकल पोजिशन के लिए। यदि केवल एक वैल्यू दी जाती है, तो y% वैल्यू इमेज को y-एक्सिस पर सेंटर करने के लिए 50% पर सेट हो जाती है। लेफ्ट टॉप 0% 0% है, टॉप राइट 100% 0%, बॉटम लेफ्ट 100% 0% और बॉटम राइट 100% 100% है।
- xpos, ypos (px/rem/em/pt में):
पिछले दो विकल्पों के समान, लेकिन नंबर CSS यूनिट्स में दिए गए हैं प्रतिशत के बजाय (हालांकि यदि आप चाहें तो प्रतिशत और rem/em/px/pt को मिक्स कर सकते हैं)। यदि कोई दूसरी वैल्यू नहीं दी जाती है, तो ypos 50% पर सेट हो जाता है।
यहां कुछ उदाहरण हैं जो पहले विकल्प का उपयोग करके विभिन्न वैल्यूज दिखाते हैं:
टॉप लेफ्ट:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Top Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> top left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
सेंटर राइट:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Center Right</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center right; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> center right </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
बॉटम लेफ्ट:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bottom Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: bottom left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> bottom left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
निष्कर्ष
उम्मीद है ऊपर दिए गए कोड एडिटर्स आपको एक अंदाजा देते हैं कि आप अपने CSS में background-position प्रॉपर्टी का उपयोग कैसे कर सकते हैं। इसके साथ खेलें - यहां उपयोग की गई बैकग्राउंड इमेज बदलें, पोजिशन बदलें - बस यह देखने के लिए कि क्या किया जा सकता है!
