বৈশিষ্ট্য background-origin

বৈশিষ্ট্য background-origin নির্ধারণ করে যে, কীভাবে পটভূমির ছবিটি (বিশেষভাবে ছবিটি, রঙ দিয়ে আবৃত করা নয়) উপাদানের সাপেক্ষে অবস্থান করবে: পটভূমির ছবিটির একটি অংশ সীমানার নীচে চলে যাবে, পটভূমি সীমানার নীচে যাবে না অথবা পটভূমি শুধুমাত্র উপাদানের বিষয়বস্তুর উপরে অবস্থান করবে (অর্থাৎ padding পটভূমিকে সরে যেতে বাধ্য করবে)।

সিনট্যাক্স

cssসিলেক্টর {
  background-origin: padding-box | border-box | content-box;
}

মানসমূহ

ডিফল্ট মান: padding-box।

মন্তব্য

বৈশিষ্ট্য background-origin কাজ করে না, যখন background-attachment এর মান fixed হয়। এছাড়াও background-repeat এর মান repeat হলে বৈশিষ্ট্য background-origin সর্বদা border-box মানের মতো কাজ করে।

উদাহরণ . ডিফল্ট

ডিফল্টভাবে, পটভূমি সীমানার নীচে যাবে না:

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

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

উদাহরণ . border-box মান

এখন পটভূমি সীমানার নীচে চলে যাবে:

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

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

উদাহরণ . content-box মান

এবং এখন পটভূমি padding এর মাধ্যমে সরে যাবে:

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

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

উদাহরণ . background-repeat: repeat হলে

background-repeat এর মান repeat হলে বৈশিষ্ট্য background-origin সর্বদা কাজ করে border-box মানের মতো, অর্থাৎ পটভূমি সর্বদা সীমানার নীচে চলে যায়:

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

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

আরও দেখুন