CSS background প্রপার্টি গুলো ব্যবহার হয় এইচটিএমএল এলিমেন্ট গুলোর ব্যাকগ্রাউন্ড বা পটভূমি যুক্ত করার জন্য ।
সিএসএস ব্যাকগ্রাউন্ড ব্যবহার করে HTML ব্লক লেভেল ও ইনলাইন এলিমেন্ট গুলোকে খুব সুন্দর ও কালারফুল করে সাজানো জায় ।
এই অধ্যায়গুলিতে আপনি নিম্নলিখিতগুলি CSS background প্রপার্টির সম্পর্কে শিখবেন
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
সিএসএস ব্যাকগ্রাউন্ড কালার
background-color প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলোর ব্যকগ্রাউন্ড কালার বা পটভূমি রঙ যুক্ত করা হয় ।
উদাহরন স্বরুপ পুরো ওয়েব পেজের ব্যকগ্রাউন্ড কালার সেট করা যায় নিচের মতো করে
body {
background-color: lightblue;
}সিএসএস এ কালার গুলো নিচের মতো করে দেয়া যেতে পারে
- color name ব্যবহার করে যেমন – “red”
- HEX value ব্যবহার করে যেমন – “#ff0000”
- RGB value ব্যবহার করে যেমন – “rgb(255,0,0)”
সিএসএস কালার এ আমরা মোটামুটি একটা ধারনা পেয়েছি এর আগেই কালার সম্পর্কে ।
আপনি যে কোনও HTML উপাদানগুলির জন্য পটভূমি রঙ সেট করতে পারেন:
উদাহরন স্বরুপ <h1>, <p>, এবং <div> এলিমেন্ট গুলোর জন্য আলাদা আলাদা ব্যকগ্রাউন্ড কালার দেখাবে
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}অপাসিটি / ট্রান্সপারেনসি
opacity property দিয়ে একটি এলিমেন্টের opacity/transparency (স্বচ্ছতা) নির্ধারন করা যায় । এটির ভেলু 0.0 থেকে 1.0 পর্যন্ত হয় যেখানে 0.0 মানে সম্পুর্ণ স্বচ্ছ বা ট্রান্সপারেন্ট এবং 1.0 মানে অস্বচ্ছ বা ট্রান্সপারেন্ট না ।
নিচের বক্স গুলো দেখুন
উদাহরন
div {
background-color: #175e82;
opacity: 0.4;
}যখন Opacity ব্যবহার করে কোন এলিমেন্ট কে ট্রান্সপারেন্ট করা হয়, তখন এটি তার সকল চিলন্ড্রেন এর ক্ষেত্রেও কার্যকর হয় । আর তাই উপরের বক্স গুলোতে দেখা যাচ্ছে যে লেখা গুলোও ট্রান্সপারেন্ট বা স্বচ্ছ হয়ে যাচ্ছে আস্তে আস্তে
RGBA ব্যবহার করে ট্রান্সপারেন্ট ব্যকগ্রাউন্ড
আপনি যদি চাইল্ড উপাদানগুলিতে অস্বচ্ছতা প্রয়োগ করতে না চান, যেটা আসলে উপরের উদাহরনে ঘটেছিলো, RGBA কালার ভ্যেলু ব্যবহার করুন ।
নিম্নলিখিত উদাহরণটি ব্যাকগ্রাউন্ড রঙের জন্য অস্বচ্ছতা সেট করে কিন্তু টেক্সট এর জন্য নয়:
সিএসএস কালার চ্যাপটার এ আপনারা শিখেছেন যে RGB কালার ভ্যেলু ব্যবহার করা যায় কালার তৈরি করার জন্য । এবার RGB কালার সিসটেম এ RGB কালার এর সাথে alpha channel যোগ করে RGBA কালার সিসটেম তৈরি করা যায় যা আসলে ট্রান্সপারেন্ট ব্যকগ্রাউন্ড তৈরি করে ।
আপনি RGBA Color system সম্পর্কে আরো জানতে পারবেন CSS RGB কালার এ ।
উদাহরন
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}