সিএসএস(৩) background-origin প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-origin | ৪.০ | ৯.০ | ৪.০ | ৩.০ | ১০.৫ |
সংজ্ঞা ও ব্যবহার
ব্যাকগ্রাউন্ড ইমেজের অবস্থান কোথায় হবে তা background-origin প্রোপার্টি ব্যবহার করে নির্ধারন করা হয়।
পরামর্শঃ
- background-attachment প্রোপার্টি "fixed" নির্ধারন করা হলে সেখানে background-origin কোন কাজ করবে না।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| padding-box | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
background-origin: padding-box/border-box/content-box/initial/inherit;
কন্টেন্টের উপরে বাম কোণ থেকে ব্যাকগ্রাউন্ড ইমেজ শুরু হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#text1 {
border: 2px solid black;
padding: 25px;
background: url(paper.jpg);
background-repeat: no-repeat;
}
#text2 {
border: 2px solid black;
padding: 25px;
background: url(paper.jpg);
background-repeat: no-repeat;
background-origin: border-box;
}
#text3 {
border: 2px solid black;
padding: 25px;
background: url(paper.jpg);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<p>background-origin না থাকলে ব্যাকগ্রাউন্ড ডিফল্টভাবে padding-box এ থাকে</p>
<div id="text1">
<h2>স্যাট একাডেমী</h2>
<p>কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং
কম্পিউটার শিক্ষা অর্জন করতে হবে। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন &
ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।</p>
</div>
<p>background-origin: border-box এর ব্যবহার</p>
<div id="text2">
<h2>স্যাট একাডেমী</h2>
<p>কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং
কম্পিউটার শিক্ষা অর্জন করতে হবে। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন &
ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।</p>
</div>
<p>background-origin: content-box এর ব্যবহার</p>
<div id="text3">
<h2>স্যাট একাডেমী</h2>
<p>কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং
কম্পিউটার শিক্ষা অর্জন করতে হবে। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন &
ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।</p>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.backgroundOrigin="content-box"উদাহরণঃ
object.style.backgroundOrigin="content-box" এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#thisDiv {
border: 1px solid black;
width: 300px;
height: 150px;
padding: 35px;
background: url('paper.jpg') no-repeat;
}
</style>
</head>
<body>
<p>Div এলিমেন্টে background-origin প্রোপার্টি "content-box" সেট করতে "ক্লিক করি" বাটনে
ক্লিক করুনঃ</p>
<button onclick="myFunction()">ক্লিক করুন</button><br><br>
<div id="thisDiv">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে।স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব
ডিজাইন & ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.backgroundOrigin = "content-box";
}
</script>
</body>
</html>
ফলাফল
background-origin প্রোপার্টির ভ্যালু-সমূহ
- padding-box - ডিফল্টভাবে ব্যাকগ্রাউন্ড ইমেজটি padding-box এ উপরের বাম পাশে থাকে।
- border-box - বর্ডারের উপরের বাম কোণ থেকে ইমেজ শুরু হবে।
- content-box - কন্টেন্টের উপরের বাম কোণ থেকে ইমেজ শুরু হবে ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
background-origin প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।