ওয়েব ডেভেলপাররা CSS ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি ব্যবহার করে যখন তারা যে ব্যাকগ্রাউন্ড ইমেজের সাথে কাজ করছে তার জন্য শুরুর অবস্থান সামঞ্জস্য করতে হবে। এই প্রবন্ধে, আমরা ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি এবং আপনার ইমেজের অবস্থান পরিবর্তন করতে কীভাবে এটি সামঞ্জস্য করা যায় তা দেখব।
সিনট্যাক্স
একটি CSS নির্বাচকের ভিতরে ব্যাকগ্রাউন্ড-পজিশন প্রপার্টির জন্য সিনট্যাক্স নিম্নরূপ:
background-position: value
ব্যাকগ্রাউন্ড-পজিশনে মান ঘোষণা করার কয়েকটি ভিন্ন উপায় রয়েছে:
- এখানে বেশ কিছু কীওয়ার্ড পেয়ার মান ব্যবহার করা যেতে পারে:
- বাম উপরে
- বাম কেন্দ্র
- বাম নীচে
- ডান উপরে
- ডান কেন্দ্র
- ডান নীচে
- সেন্টার টপ
- কেন্দ্র কেন্দ্র
- কেন্দ্রের নীচে
প্রথম শব্দটি অনুভূমিক, বা x, অক্ষের প্রতিনিধিত্ব করে। দ্বিতীয় শব্দটি উল্লম্ব, বা y, অক্ষের প্রতিনিধিত্ব করে। যদি শুধুমাত্র একটি মান ঘোষণা করা হয়, y-মান স্বয়ংক্রিয়ভাবে 'কেন্দ্রে' সেট করা হয়।
- 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%;
এখানে কিছু উদাহরণ রয়েছে যা প্রথম বিকল্প ব্যবহার করে বিভিন্ন মান দেখায়:
উপরে বাম:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
<!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-এ ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি ব্যবহার করতে পারেন। এটির সাথে খেলুন - এখানে ব্যবহৃত ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করুন, অবস্থান পরিবর্তন করুন - শুধু কি করা যায় তা দেখতে!
