background-position প্রোপার্টি
background-position প্রোপার্টি
এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজের অবস্থান নির্ধারণ করে।
যেকোনো সাইজের একক
ব্যবহার করে অবস্থান নির্ধারণ করা যেতে পারে। প্রথম মানটি বাম দিক থেকে দূরত্ব নির্দেশ করে,
দ্বিতীয় মানটি উপরের দিক থেকে দূরত্ব নির্দেশ করে।
কীওয়ার্ড দিয়েও অবস্থান নির্ধারণ করা যেতে পারে।
এই ক্ষেত্রে মানের ক্রম গুরুত্বপূর্ণ নয়। উল্লম্ব অক্ষের জন্য কীওয়ার্ড: top,
center, bottom। অনুভূমিক অক্ষের জন্য কীওয়ার্ড:
left, center, right।
কীওয়ার্ড如何使用
কীওয়ার্ড দিয়ে ইমেজ স্থানান্তর করতে,
উল্লম্ব এবং অনুভূমিক অক্ষের জন্য একটি করে মান নির্দিষ্ট করতে হবে।
উদাহরণস্বরূপ, top right মান নির্দিষ্ট করলে,
ইমেজটি উপরের ডান দিকে অবস্থান করবে।
শব্দের ক্রম গুরুত্বপূর্ণ নয়: top right লিখতে পারেন,
অথবা right top লিখতে পারেন। যদি
center কীওয়ার্ড থাকে - সেটি বাদ দেওয়া যেতে পারে।
উদাহরণস্বরূপ, top center, top এর সমতুল্য।
আর center center
center এর সমতুল্য।
সিনট্যাক্স
সিলেক্টর {
background-position: স্পেস দ্বারা পৃথকীকৃত দুটি মান;
}
উদাহরণ
ডিফল্টভাবে ব্যাকগ্রাউন্ড ইমেজ উপরের বাম কোণায় অবস্থান করবে:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি উপরের ডান কোণে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: top right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি নিচের ডান কোণে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: bottom right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি ডান দিকে এবং উল্লম্বভাবে কেন্দ্রে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: right center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি ব্লকের কেন্দ্রে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: center center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি বাম দিকে 20px এবং উপরের দিকে 40px দূরত্বে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: 20px 40px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি বাম দিকে 90% এবং উপরের দিকে 100% দূরত্বে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: 90% 100%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি বাম দিকে 30px দূরত্বে এবং উল্লম্বভাবে নিচের দিকে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: 30px bottom;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি বাম দিকে 30px দূরত্বে এবং উল্লম্বভাবে কেন্দ্রে স্থানান্তর করi:
<div id="elem"></div>
#elem {
background-position: 30px center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
উদাহরণ
আসুন ব্যাকগ্রাউন্ড ইমেজটি উপরের দিকে 30px দূরত্বে এবং অনুভূমিকভাবে কেন্দ্রে স্থানান্তর করি:
<div id="elem"></div>
#elem {
background-position: center 30px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
আরো দেখুন
-
backgroundপ্রোপার্টি,
যা ব্যাকগ্রাউন্ডের জন্য সংক্ষিপ্ত প্রোপার্টি
