সিএসএস background-position: এটি কী এবং কীভাবে কাজ করে?

ওয়েব ডেভেলপাররা সিএসএস background-position প্রপার্টি ব্যবহার করেন যখন তাদের ব্যাকগ্রাউন্ড ইমেজের স্টার্টিং পজিশন (starting position) অ্যাডজাস্ট (adjust) করতে হয়। এই আর্টিকেলে, আমরা background-position প্রপার্টি এবং কীভাবে এটিকে অ্যাডজাস্ট করে আপনার ইমেজের পজিশন পরিবর্তন করা যায় সেটা দেখব।

সিনট্যাক্স (Syntax)

সিএসএস সিলেক্টরের ভিতরে background-position প্রপার্টির সিনট্যাক্স নিম্নরূপ:

background-position: value

background-position-এ ভ্যালু ডিক্লেয়ার করার একাধিক পদ্ধতি রয়েছে:

• অনেকগুলো কীওয়ার্ড পেয়ার (keyword pair) ভ্যালু ব্যবহার করা যায়:
  • 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% ভ্যালু 50%-এ সেট হয় যাতে ইমেজ y-অক্ষে সেন্টার হয়। Left top হচ্ছে 0% 0%, top right হচ্ছে 100% 0%, bottom left হচ্ছে 0% 100% এবং bottom right হচ্ছে 100% 100%。

• xpos, ypos (px/rem/em/pt-এ):

পূর্বের দুটি অপশনের মতোই, কিন্তু নম্বরগুলো সিএসএস ইউনিট (CSS units)-এ দেওয়া হয় পারসেন্টেজের বদলে (যদি আপনি চান তবে পারসেন্টেজ এবং rem/em/px/pt মিক্স ও করতে পারেন)। যদি কোনো দ্বিতীয় ভ্যালু না দেওয়া হয়, তবে ypos 50%-এ সেট হয়।

এখানে কিছু উদাহরণ যাতে প্রথম অপশন ব্যবহার করে ভিন্ন ভ্যালুগুলো দেখানো হয়েছে:

টপ লেফট (Top Left):

<!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>

সেন্টার রাইট (Center Right):

<!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>

বটম লেফট (Bottom Left):

<!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>

উপসংহার

আশা করি উপরের কোড এডিটরগুলো আপনাকে একটি ধারণা দিয়েছে কীভাবে আপনি আপনার সিএসএস-এ background-position প্রপার্টি ব্যবহার করতে পারেন। এর সাথে খেলুন – ব্যাকগ্রাউন্ড ইমেজ চেঞ্জ করুন, পজিশন চেঞ্জ করুন – শুধু দেখতে পান কী কী করা যায়!