সিএসএস background-attachment প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-attachment | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
একটি ব্যাকগ্রাউন্ড ইমেজ কি স্থির থাকবে নাকি স্ক্রল করবে তা background-attachment প্রোপার্টি দ্বারা নির্দেশ করা হয় ।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| scroll | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
background-attachment: scroll/fixed/local/initial/inherit;
একটি স্থির ব্যাকগ্রাউন্ড ইমেজ নির্ধারন করা উদাহরন:
উদাহরণ
background-attachment: fixed এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url('../cssref_examples/natural.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
color:red;
}
</style>
</head>
<body>
<div>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
<p> background-image কে নির্দিষ্ট হয়েছে । পেজকে নিচের দিকে স্ক্রোল করে দেখুন।</p>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.backgroundAttachment="fixed"উদাহরণ
object.style.backgroundAttachment= fixed এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDIV {
width: 500px;
height:350px;
background: lightsalmon url('../cssref_examples/natural.jpg') no-repeat;
color: blue;
overflow: auto;
}
</style>
</head>
<body>
<p> radio বাটনে ক্লিক করুন এবং DIV এলিমেন্ট স্ক্রোল করে background-attachment এর ইফেক্ট দেখুনঃ </p>
<form name="thisForm">
<input type="radio" name="thisAtt" value="scroll" onclick="myFunction()" checked>scroll
<input type="radio" name="thisAtt" value="local" onclick="myFunction()">local
</form>
<div id="thisDIV">
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
<h1> স্যাট একাডেমী</h1>
</div>
<script>
function myFunction() {
if (document.forms["myForm"]["myAtt"][0].checked) {
document.getElementById("myDIV").style.backgroundAttachment = "scroll";
} else {
document.getElementById("myDIV").style.backgroundAttachment = "local";
}
}
</script>
</body>
</html>
ফলাফল
background-attachment প্রোপার্টির ভ্যালু-সমূহ
- scroll - ডিফল্ট ভাবে ব্যাকগ্রাউন্ড এলিমেন্ট স্ক্রল করবে।
- fixed -ব্যাকগ্রাউন্ড ইমেজ স্থির করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।