background-repeat প্রপার্টি

background-repeat প্রপার্টিটি একটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি করা হবে তা নির্ধারণ করে। ডিফল্টভাবে, ইমেজটি X অক্ষ এবং Y অক্ষ উভয় বরাবর পুনরাবৃত্তি হয়, এইভাবে সমস্ত প্রাপ্তযোগ্য এলাকা আবৃত করে।

সিনট্যাক্স

cssসিলেক্টর {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

মানসমূহ

মান	বর্ণনা
`no-repeat`	ইমেজটি একদমই পুনরাবৃত্তি হবে না।
`repeat-x`	ইমেজটি X অক্ষ বরাবর পুনরাবৃত্তি হবে।
`repeat-y`	ইমেজটি Y অক্ষ বরাবর পুনরাবৃত্তি হবে।
`repeat`	ইমেজটি X অক্ষ এবং Y অক্ষ উভয় বরাবর পুনরাবৃত্তি হবে।
`space`	ইমেজটি সম্পূর্ণরূপে এলাকা পূরণ করার জন্য যতবার প্রয়োজন ততবার পুনরাবৃত্তি হবে, যদি তা সম্ভব না হয়, তাহলে ইমেজগুলির মধ্যে ফাঁকা স্থান যোগ করা হয়।
`round`	ইমেজটি এমনভাবে পুনরাবৃত্তি হবে যাতে এলাকায় পূর্ণ সংখ্যক ইমেজ ফিট হয়, যদি তা সম্ভব না হয়, তাহলে ব্যাকগ্রাউন্ড ইমেজগুলি স্কেল করা হয়।

ডিফল্ট মান: repeat - সম্পূর্ণ স্ক্রীনটি একটি প্যাটার্ন দিয়ে আবৃত করে।

উদাহরণ

ডিফল্টভাবে, ব্যাকগ্রাউন্ড ইমেজটি সম্পূর্ণ এলিমেন্টকে টাইল করে আবৃত করবে:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

আসুন ইমেজটি যাতে পুনরাবৃত্তি না হয় সেভাবে করি:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

এবার ইমেজটি X অক্ষ বরাবর পুনরাবৃত্তি হোক:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

এবার Y অক্ষ বরাবর:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

অক্ষ বরাবর পুনরাবৃত্ত হওয়া ইমেজগুলিকে background-position প্রপার্টি ব্যবহার করে পজিশন করা যায়:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

দেখি space মানটি কিভাবে কাজ করে:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

উদাহরণ

দেখি round মানটি কিভাবে কাজ করে:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

আরও দেখুন

background প্রপার্টি,
যা ব্যাকগ্রাউন্ডের জন্য একটি শর্টহ্যান্ড প্রপার্টি