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

background-size প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের আকার নির্ধারণ করে। প্রপার্টির মান হতে পারে যেকোনো আকারের একক, অথবা কীওয়ার্ড auto, cover বা contain।

সিনট্যাক্স

cssসিলেক্টর {
  background-size: মান;
}

কীওয়ার্ড

ডিফল্ট মান: auto।

ব্যবহার

আকারের একক এবং auto বিভিন্ন সংমিশ্রণে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, এভাবে: auto 20px, বা 30% 20px, বা auto 30% ইত্যাদি। এ情况下 প্রথম প্যারামিটার প্রস্থ অনুযায়ী ব্যাকগ্রাউন্ডের আকার নির্ধারণ করে, এবং দ্বিতীয় প্যারামিটার - উচ্চতা অনুযায়ী ব্যাকগ্রাউন্ডের আকার নির্ধারণ করে। যদি একটি প্যারামিটার উল্লেখ করা হয় - তবে এটি প্রস্থ এবং উচ্চতা উভয় অনুযায়ী ব্যাকগ্রাউন্ডের আকার নির্ধারণ করবে।

উদাহরণ

এখন ব্যাকগ্রাউন্ড ইমেজের নিজস্ব প্রাকৃতিক আকার থাকবে:

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

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

Результат:

উদাহরণ

এখন ব্যাকগ্রাউন্ড ইমেজের আকার হবে 300px বাই 400px (আমাদের ক্ষেত্রে ইমেজের অনুপাত বিকৃত হবে):

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

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

Результат:

উদাহরণ

এখন ব্যাকগ্রাউন্ড ইমেজের আকার হবে 400px বাই 400px (আমাদের ক্ষেত্রে ইমেজের অনুপাত বিকৃত হবে):

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

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

Результат:

উদাহরণ

এখন ব্যাকগ্রাউন্ড ইমেজের আকার অনুভূমিকভাবে 400px হবে, এবং উল্লম্বভাবে এর আকার অনুযায়ী সামঞ্জস্য হবে, যাতে অনুপাত বিকৃত না হয়:

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

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

Результат:

উদাহরণ

এখন ব্যাকগ্রাউন্ড ইমেজের আকার উল্লম্বভাবে 400px হবে, এবং অনুভূমিকভাবে এর আকার অনুযায়ী সামঞ্জস্য হবে, যাতে অনুপাত বিকৃত না হয়:

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

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

Результат:

উদাহরণ . contain মান

contain মানের কাজ দেখুন:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

উদাহরণ . cover মান

cover মানের কাজ দেখুন:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

উদাহরণ . cover এর কাজ উন্নত করা

cover মানের কাজ উন্নত করা যেতে পারে, যদি background-position প্রপার্টি ব্যবহার করে ইমেজটি সেন্টারে নিয়ে আসা হয় (আমাদের ক্ষেত্রে দৃশ্যমান অংশে ঘোড়ার মাথা দেখা যাবে, পিছনের অংশ নয়):

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

আরও দেখুন