সিএসএস ব্যাকগ্রাউন্ড
এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।
সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ
- background-color
- background-image
- background-position
- background-repeat
- background-attachment
এক নজরে সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-color
একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-color: ForestGreen;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড কালার</h1>
<p>এই পেজটির ব্যাকগ্রাউন্ডের কালার ForestGreen সেট করা হয়েছে।</p>
</body>
</html>
ফলাফল
সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ
- কালারের নাম ব্যবহার করে। যেমন- "red"
- HEX ভ্যালু ব্যবহার করে। যেমন- "#ff0000"
- RGB ভ্যালু ব্যবহার করে। যেমন- "rgb(255,0,0)"
সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।
নিচের উদাহরণে <h1>, <p> এবং <div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h2 {
background-color: blue;
color: white;
}
div {
background-color: green;
}
p {
background-color: red;
}
</style>
</head>
<body>
<h2>CSS এর মাধ্যমে ব্যাকগ্রাউন্ডে কালার দেয়ার উদাহরণ।</h1>
<div>
এটি একটি div এলিমেন্ট।
<p>এই প্যারাগ্রাফটির নিজস্ব ব্যাকগ্রাউন্ড কালার দেয়া আছে.</p>
আমরা এখনো div এলিমেন্টের মধ্যে আছি।
</div>
</body>
</html>
ফলাফল
background-image
এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।
সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।
একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper.jpg");
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এই পেইজের ব্যাকগ্রাউন্ডে একটি ইমেজ দেয়া আছে।</p>
</body>
</html>
ফলাফল
ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট কালারের সঠিক সমন্বয় না হলে লেখা পড়তে সমস্যা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper.jpg");
color: sienna;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ড ইমেজের জন্য লেখাগুলো সঠিকভাবে পড়া যাচ্ছে না।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।
background-repeat: repeat-x; & repeat-y;
background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।
কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটি দেখতে অদ্ভুত লাগছে!!!</p>
<br><br><br><br><br><br><br><br>
</body>
</html>
বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।
ফলাফল
শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এখানে ব্যাকগ্রাউন্ডের ইমেজটি শুধুমাত্র x অক্ষে রিপিট করেছে।</p>
<br><br><br><br><br><br><br><br>
</body>
</html>
ফলাফল
পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।
background-position প্রোপার্টি এবং no-repeat ভ্যালুর ব্যবহার
আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ড ইমেজটি একবার প্রদর্শিত হবে কিন্তু এটি পাঠককে পড়ায় বিরক্তির সৃষ্টি করে।</p>
</body>
</html>
ফলাফল
উপরোক্ত উদাহরণে, টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজকে একই জায়গায় দেখানো হয়েছে। আপনি চাইলে ইমেজের পজিশন পরিবর্তন করতে পারেন যাতে ইহা টেক্সটসমূহ পড়তে কোনো সমস্যা না করে।
background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটিতে no-repeat পজিশন দেয়া আছে।</p>
<p>ইমেজটি একবার প্রদর্শিত হবে এবং তা ব্রাউজারের উপরের ডানে থাকবে।</p>
<p>এই উদাহরণটিতে ইমেজটিতে মার্জিন ব্যবহার করা হয়েছে যাতে ইমেজটি পাঠককে পড়ার সময় বিরক্তির সৃষ্টি না করে।</p>
</body>
</html>
ফলাফল
background-attachment
ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
</body>
</html>
ফলাফল
background - শর্টহ্যান্ড প্রোপার্টি
কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে
background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background: #ffffff url("paper2.jpg") no-repeat right top;
margin-right: 250px;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এখন ব্যাকগ্রাউন্ডের ছবিটি একবারই দেখা যাবে এবং এটিকে টেক্সট থেকে সরিয়ে নেওয়া হয়েছে।</p>
<p>এই উদাহরণের ডানপাশে মার্জিন যোগ হয়েছে, যাতে ছবিটি পাঠককে পড়ার সময়ে কোন ধরনের বিরক্তির সৃষ্টি না করতে পারে।</p>
</body>
</html>
ফলাফল
যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
অন্য সবগুলো প্রোপার্টির ক্রম ঠিক থাকলে একটি প্রোপার্টির মান অনুপস্থিত থাকলেও কোন সমস্যা হবে না।