CSS background-position-y প্রোপার্টি

বিবরণ ও ব্যবহার

background-position-y এই প্রতিভা পিছনের চিত্রকে y-অক্ষে কোণে স্থানান্তরিত করে।

সুঝানা:ডিফল্টে, পিছনের চিত্র এলাকার ডানদিকের শীর্ষে স্থানান্তরিত হয় এবং উপর এবং নীচে দিকে পাল্টানো হয়。

প্রয়োগ

উদাহরণ 1

পিছনের চিত্রকে y-অক্ষে কিভাবে স্থানান্তরিত করা যায়:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 2

পিছনের চিত্রকে শীর্ষে কিভাবে স্থানান্তরিত করা যায়:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 3

প্রতিশতের মাধ্যমে y-অক্ষে ব্যাকগ্রাউন্ড চিত্রকে অবস্থান করানোর কিভাব:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 4

পিক্সেল দিয়ে y-অক্ষে ব্যাকগ্রাউন্ড চিত্রকে অবস্থান করানোর কিভাব:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

আপনার হাতে পরীক্ষা করুন

CSS সংজ্ঞান

background-position-y: value;

এক্সপ্রেশন

মান বর্ণনা
top ব্যাকগ্রাউন্ড অবস্থান য় y-অক্ষের উপরের পাশ্যে নিয়ে যান
bottom ব্যাকগ্রাউন্ড অবস্থান য় y-অক্ষের নীচের পাশ্যে নিয়ে যান
center ব্যাকগ্রাউন্ড অবস্থান য় য-অক্ষের কেন্দ্রে নিয়ে যান
y%

y-অক্ষের উপরের পাশ্য 0% এবং নীচের পাশ্য 100%

পেটিংয়ের পাশ্য হল ব্যাকগ্রাউন্ড চিত্রের পাশ্য থেকে পাশ্যের পাশ্য
ypos

উপরের ভিত্তিক উপরোক্ত বান্ধব

ইউনিট হতে পারে পিক্সেল (যেমন 0px) অথবা অন্য CSS ইউনিট.
ypos offset

দ্বিমূলক সংজ্ঞান, শুধুমাত্র Firefox এবং Safari-তে সমর্থিত

  • ypos top অথবা bottom সেট করুন
  • offset এটি ব্যাকগ্রাউন্ড চিত্রকে ypos সেটকরণের উপরে অথবা নীচের ভিত্তিক উপরোক্ত ভিত্তিক বান্ধব হয়

ইউনিট হতে পারে পিক্সেল (যেমন 0px) অথবা অন্য CSS ইউনিট.
initial এই এক্সপ্রেশনটি তার ডিফল্ট মানে নিয়ে নিন initial.
inherit এই এক্সপ্রেশনটি তার পিতৃত্বকারী উপাদান থেকে উত্তরসূরী করুন inherit.

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: 0%
পুনর্বিন্যস্তকরণ: না
অ্যানিমেশন নির্মাণ: সমর্থিত: দেখুন:অ্যানিমেশন-সংক্রান্ত এক্সপ্রেশন.
সংস্করণ: CSS3
JavaScript সংজ্ঞান: object.style.backgroundPositionY="center"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই এক্সপ্রেশনটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণ

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
একমূলক সংজ্ঞান 1.0 12.0 49.0 1.0 15.0
দ্বিমূলক সংজ্ঞান সমর্থিত না সমর্থিত না 49.0 15.4 সমর্থিত না

সংশ্লিষ্ট পাতা

শিক্ষাক্রম:CSS প্রক্ষেপণ

CSS উপস্থাপনা:background-image এক্সপ্রেশন

CSS উপস্থাপনা:background-position এক্সপ্রেশন

CSS উপস্থাপনা:background-position-x এক্সপ্রেশন

HTML DOM উপস্থাপনা:backgroundPosition এক্সপ্রেশন