সিএসএস(৩) background-size প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-size | ৪.০ ১.০ -webkit- |
৯.০ | ৪.০ ৩.৬ -moz- |
৪.১ ৩.০ -webkit- |
১০.৫ ১০.০ -o- |
সংজ্ঞা ও ব্যবহার
"background-size" প্রোপার্টিটি ব্যাকগ্রাউন্ড ইমেজকে বুঝায়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| auto | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
background-size: auto/length/cover/contain/initial/inherit;
একটি ব্যাকগ্রাউন্ড ছবির সাইজকে বুঝায়:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("../cssref_examples/chandpur1.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>পাঞ্জেরি – ফররুখ আহমেদ
রাত পোহাবার কত দেরি পাঞ্জেরি? এখনো তোমার আসমান ভরা মেঘে?
সেতারা, হেলার এখনো ওঠেনি জেগে? তুমি মাস্তলে, আমি দাঁড় টানি ভুলে;
অসীম কুয়াশা জাগে শূন্যতা ঘেরি। রাত পোহাবার কত দেরি পাঞ্জেরি?
দীঘল রাতের শ্রান্তসফর শেষে কোন দরিয়ার কালো দিগন্তে আমরা পড়েছি এসে?
<p> প্রকৃত ইমেজ : <img src="../cssref_examples/chandpur1.jpg" alt="chandpur" width="224" height="162" /></p>
<p><strong>বিঃদ্রঃ </strong> ব্যাকগ্রাউন্ড- সাইজ প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৮ এবং তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা। </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.backgroundSize="60px 120px"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid black;
width: 300px;
height: 300px;
background: url('../cssref_examples/chandpur1.jpg') no-repeat;
}
</style>
</head>
<body>
<p> DIV ইলিমেন্ট এর ব্যাকগ্রাউন্ড সাইজকে ইনলারজ করার জন্য "চেষ্টা করি" বাটনে ক্লিক করি :</p>
<button onclick="myFunction()">চেষ্টা করি </button>
<div id="thisDiv">
<h1>হ্যালো আয়েশা</h1>
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.backgroundSize = "60px 120px";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের সম্পূর্ণ জায়গা জুড়ে থাকে:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: url("../cssref_examples/chandpur1.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
পাঞ্জেরি – ফররুখ আহমেদ
রাত পোহাবার কত দেরি পাঞ্জেরি?এখনো তোমার আসমান ভরা মেঘে?
সেতারা, হেলার এখনো ওঠেনি জেগে? তুমি মাস্তলে, আমি দাঁড় টানি ভুলে;
অসীম কুয়াশা জাগে শূন্যতা ঘেরি। রাত পোহাবার কত দেরি পাঞ্জেরি?
দীঘল রাতের শ্রান্তসফর শেষে কোন দরিয়ার কালো দিগন্তে আমরা পড়েছি এসে?
এ কী ঘন-সিয়া জিন্দেগানীর বা’ব তোলে মর্সিয়া ব্যথিত দিলের তুফান-শ্রান্ত খা’ব
অস্ফুট হয়ে ক্রমে ডুবে যায় জীবনের জয়ভেরী। তুমি মাস্তুলে, আমি দাঁড় টানি ভুলে;
অসীম কুয়াশা জাগে শূন্যতা ঘেরি। রাত পোহাবার কত দেরি পাঞ্জেরি?
দীঘল রাতের শ্রান্তসফর শেষে কোন দরিয়ার কালো দিগন্তে আমরা পড়েছি এসে?
এ কী ঘন-সিয়া জিন্দেগানীর বা’ব তোলে মর্সিয়া ব্যথিত দিলের তুফান-শ্রান্ত খা’ব
অস্ফুট হয়ে ক্রমে ডুবে যায় জীবনের জয়ভেরী। তুমি মাস্তুলে, আমি দাঁড় টানি ভুলে
</div>
</body>
</html>
ফলাফল
ব্যাকগ্রাউন্ড ছবিটি হরিজন্টালভাবে চারটি ছবি কপি করে পুরো কন্টেন্ট জুড়ে থাকবে:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: url(../cssref_examples/chandpur1.jpg.jpg);
background-size: 25%;
border: 2px solid #92b901;
color:white;
}
</style>
</head>
<body>
<div>
পাঞ্জেরি – ফররুখ আহমেদ
রাত পোহাবার কত দেরি পাঞ্জেরি?এখনো তোমার আসমান ভরা মেঘে?
সেতারা, হেলার এখনো ওঠেনি জেগে? তুমি মাস্তলে, আমি দাঁড় টানি ভুলে;
অসীম কুয়াশা জাগে শূন্যতা ঘেরি। রাত পোহাবার কত দেরি পাঞ্জেরি?
দীঘল রাতের শ্রান্তসফর শেষে কোন দরিয়ার কালো দিগন্তে আমরা পড়েছি এসে?
এ কী ঘন-সিয়া জিন্দেগানীর বা’ব তোলে মর্সিয়া ব্যথিত দিলের তুফান-শ্রান্ত খা’ব
অস্ফুট হয়ে ক্রমে ডুবে যায় জীবনের জয়ভেরী। তুমি মাস্তুলে, আমি দাঁড় টানি ভুলে;
</div>
</body>
</html>
ফলাফল
background-size প্রোপার্টির ভ্যালু-সমূহ
- auto - ব্যাকগ্রাউন্ড ছবির প্রস্থ এবং উচ্চতার ভ্যালু ডিফল্টভাবে নির্ধারিত হবে।
- length - ব্যাকগ্রাউন্ড ছবির প্রস্থ এবং উচ্চতা জন্য প্রথমে প্রস্থের এবং পরে উচ্চতার ভ্যালু নির্ধারন করতে হয়। যদি একটির ভ্যালু দেওয়া হয় তাহলে সক্রিয়ভাবে "auto" দিতীয়টার ভ্যালু নিবে।
- percentage - প্যারেন্ট এলিমেন্টে ব্যাকগ্রাউন্ড ছবির প্রস্থ এবং উচ্চতার শতকরার জন্য প্রথমে প্রস্থের এবং পরে উচ্চতার ভ্যালু নির্ধারিত করতে হয়, যদি একটির ভ্যালু দেওয়া হয় তাহলে সক্রিয়ভাবে "auto" দিতীয়টার ভ্যালু নিবে।
- cover - ব্যাকগ্রাউন্ড ছবিকে যতটুকু সম্ভব বড় করি যাতে ব্যাকগ্রাউন্ড অংশকে পুরোপুরি ঢেকে ফেলতে পারে।ব্যাকগ্রাউন্ড ছবির কিছু অংশ ব্যাকগ্রাউন্ড অংশর মধ্যে নাও দেখা যেতে পারে।
- contain -ছবিটি এত বড় যে ছবিটির প্রস্থ এবং উচ্চতা দুটিরই কিছু অংশ কন্টেন্টের বাহিরে অবস্থান করবে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
background-size প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।