CSS คุณสมบัติ background-position-x

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

background-position-x এটি প্রতিযোগিতা সেটিংকে একটি এক্স অক্ষের অবস্থান নির্ধারণ করে。

সূচনা:ডিফল্টে, ব্যাকগ্রাউন্ড ইমেজ এলমেন্টের ডানদিকের ওপর এবং অসমান্তরাল ও সমান্তরাল দিকে পুনরাবৃত্তি হয়。

প্রকল্প

উদাহরণ 1

কিভাবে x-অক্ষে ব্যাকগ্রাউন্ড ইমেজকে লোকেশন করা যায়:

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

স্বয়ং প্রয়াস করুন

উদাহরণ 2

ব্যাকগ্রাউন্ড ইমেজকে ডানদিকে কিভাবে লোকেশন করা যায়:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

স্বয়ং প্রয়াস করুন

উদাহরণ 3

পারসেন্টের মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ কিভাবে লোকেশন করা যায়:

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

স্বয়ং প্রয়াস করুন

উদাহরণ 4

পিক্সেল লোকেশনের মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ কিভাবে ব্যবহার করা যায়:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

স্বয়ং প্রয়াস করুন

উদাহরণ 5

বিভিন্ন ব্যাকগ্রাউন্ড প্রতিযোগিতা একটি কাউন্টেইনারকে আবর্ণন করে একটি ব্যাকগ্রাউন্ড ইমেজ তৈরি করুন:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* চিত্র উপলব্ধ না হলে এই রঙ ব্যবহার করুন */
  height: 300px; /* উচ্চতা নিশ্চিত করুন */
  background-position-x: center; /* চিত্রটি কেন্দ্রে স্থাপন করুন */
  background-repeat: no-repeat; /* চিত্রটি অব্যবহার করুন */
  background-size: cover; /* পটভূমির চিত্রটির মাপ সম্পূর্ণ কান্টেইনারকে আবৃত করুন */
}

স্বয়ং প্রয়াস করুন

CSS সংজ্ঞান

background-position-x: value;

এটিবিউট মান

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

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

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

সংশ্লিষ্ট পৃষ্ঠা

শিক্ষাদত্ত্রCSS পটভূমি

CSS উপাদানbackground-image এটিবিউট

CSS উপাদানbackground-position এটিবিউট

CSS উপাদানbackground-position-y এটিবিউট

HTML DOM উপাদানbackgroundPosition এটিবিউট