সিএসএস background-repeat প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-repeat | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.০ |
সংজ্ঞা ও ব্যবহার
"background-repeat" প্রোপার্টি মাধ্যমে ব্যাকগ্রাউন্ড ছবি রিপিট করা যায়।
ডিফল্টভাবে, একটি ব্যাকগ্রাউন্ড ইমেজ ভার্টিক্যাল এবং হরিজন্টাল দুইভাবেই রিপিট করবে।
পরামর্শঃ
- ব্যাকগ্রাউন্ড ইমেজ "background-position" প্রোপার্টি অনুসারে নির্ধারন করা হয়। যদি, কোন "background-position" নির্ধারন করা না হয় তাহলে ব্যাকগ্রাউন্ড ইমেজ সবসময় এলিমেন্টে ওপরের বাম দিকের কোনায় অবস্থান করবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| repeat | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
background-repeat: repeat/repeat-x/repeat-y/no-repeat/initial/inherit;
ভার্টিক্যালভাবে একটি ছবি রিপিট করবে:
উদাহরণঃ
background-repeat: repeat-y এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("../cssref_examples/listimg1.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>একটি ইমেজকে শুধুমাত্র ভার্টিক্যালি রিপিট করার জন্য repeat ব্যবহার করা হয়।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.backgroundRepeat="repeat-x"উদাহরণঃ
object.style.backgroundRepeat=repeat-x এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid black;
width: 300px;
height: 150px;
background: url("../images/chandpur1.jpg") no-repeat;
}
</style>
</head>
<body>
<p>DIV এলিমেন্টের x অক্ষে ব্যাকগ্রাউন্ড যুক্ত করে "চেষ্টা করি" বাটনটিতে ক্লিক করুন।</p>
<button onclick="myFunction()"> চেষ্টা করি </button>
<br><br>
<div id="thisDiv">
<h1>হ্যালো বাংলাদেশ</h1>
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.backgroundRepeat = "repeat-x";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
কিভাবে ব্যাকগ্রাউন্ড ছবি ভার্টিক্যাল এবং হরিজন্টাল দুইভাবেই (ডিফল্টভাবে ব্যাকগ্রাউন্ড ছবি জন্য) রিপিট করবে তার উদাহরণ:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("../cssref_examples/listimg.png');
}
</style>
</head>
<body>
<p> ডিফল্ট ভাবে , একটি ব্যাকগ্রাউন্ড ইমেজ ভার্টকালি এবং হরিজন্টালি রিপিঁট হবে। </p>
</body>
</html>
ফলাফল
ব্যাকগ্রাউন্ড ছবি শুধু হরিজন্টালভাবে রিপিট করবে:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("../cssref_examples/chandpur1.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p> repeat-x ব্যাকগ্রাউন্ড ইমেজকে হরিজন্টালি ভাবে রিপিট করার জন্য এটি ব্যবহার করা হয়। </p>
</body>
</html>
ফলাফল
ব্যাকগ্রাউন্ড ছবি কোনো রিপিট ছাড়া প্রদর্শন করবে:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("../cssref_examples/chandpur1.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>no-repeat ব্যাকগ্রাউন্ড ইমেজটি কখনই রিপিঁট হবেনা।ইমেজটি শুধমাত্র একবার দেখাবে। </p>
</body>
</html>
ফলাফল
background-repeat প্রোপার্টির ভ্যালু-সমূহ
- repeat - এটি ডিফল্টভাবে, একটি ব্যাকগ্রাউন্ড ইমেজ ভার্টিক্যাল এবং হরিজন্টাল দুইভাবেই রিপিট করবে।
- repeat-x - ব্যাকগ্রাউন্ড ছবি হরিজন্টালভাবে রিপিট করবে।
- repeat-y - ব্যাকগ্রাউন্ড ছবি ভার্টিক্যালভাবে রিপিট করবে।
- no-repeat - ব্যাকগ্রাউন্ড ছবি রিপিট করবে না।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
background-repeat প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।