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

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

সিনট্যাক্স

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

কীওয়ার্ড

মান	বর্ণনা
`auto`	ব্যাকগ্রাউন্ডের প্রাকৃতিক আকার থাকবে, যেমন ব্যাকগ্রাউন্ড ইমেজের প্রকৃত আকার। যদি `auto` শুধুমাত্র এক দিকের জন্য নির্ধারণ করা হয়, তবে সেই দিক অনুযায়ী ব্যাকগ্রাউন্ড স্কেল করা হবে, যাতে বিকৃত অনুপাত না হয়।
`cover`	ইমেজটিকে এমনভাবে স্কেল করে যাতে এটি সম্পূর্ণ ব্লকটিকে আবৃত করে অনুপাত বজায় রেখে। ইমেজটি সম্পূর্ণভাবে ফিট করার চেষ্টা করবে কিন্তু এটি সর্বদা সম্ভব নাও হতে পারে, তাই এর কিছু অংশ কাটা যেতে পারে। ব্লকটি সর্বদা সম্পূর্ণরূপে ইমেজ দ্বারা আবৃত থাকবে।
`contain`	ইমেজটিকে এমনভাবে স্কেল করে যাতে এটি সম্পূর্ণভাবে ব্লকের মধ্যে ফিট করে অনুপাত বজায় রেখে। এ情况下 এটি হয় সম্পূর্ণ প্রস্থ, বা সম্পূর্ণ উচ্চতা দখল করতে পারে (ইমেজের অনুপাত এবং এলিমেন্টের আকারের উপর নির্ভর করে)। ব্লক সাধারণত সম্পূর্ণরূপে ইমেজ দ্বারা আবৃত হবে না (তবে ইমেজটি সর্বদা সম্পূর্ণ দেখা যাবে, যদিও ছোট আকারে)।

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

ব্যবহার

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ

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

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

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

উদাহরণ . contain মান

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

<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>

.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 মানের কাজ দেখুন:

<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>

.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 প্রপার্টি ব্যবহার করে ইমেজটি সেন্টারে নিয়ে আসা হয় (আমাদের ক্ষেত্রে দৃশ্যমান অংশে ঘোড়ার মাথা দেখা যাবে, পিছনের অংশ নয়):

<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>

.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;
}

আরও দেখুন

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