কোন এলিমেন্টের জন্য ব্যাকগ্রাউন্ড এর স্টাইল খুব গুরুত্বপূর্ণ। ওয়েব পেজের ব্যাকগ্রাউন্ডে বিভিন্ন স্টাইল যুক্ত করতে সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো ব্যবহার করা হয়।
সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো নিচে দেখুন।
কোন এলিমেন্টের ব্যাকগ্রাউন্ডের রং বা color নির্ধারণ করতে সিএসএস ব্যাকগ্রাউন্ড কালার (background-color) প্রপার্টি ব্যবহার করা হয়।
নিচে একটি উদাহরণ দেখুন, যেখানে কোন এইচটিএমএল ডকুমেন্টের body তে ব্যাকগ্রাউন্ড কালার নির্ধারণ করা হয়েছে।
body { background-color: body; }
বিভিন্ন পদ্ধতিতে কালার উল্লেখ করা যায়। তার মাঝে উল্লেখযোগ্য পদ্ধতিগুলো হল -
সিএসএস এ ব্যবহার করার জন্য বিভিন্ন রঙের নাম ও মান জানতে সিএসএস - রঙের নাম ও সিএসএস - রঙের মান টিউটোরিয়াল গুলো দেখুন।
অন্য যে কোন এইচটিএমএল এলিমেন্টে background-color প্রপার্টি ব্যবহার করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে h1, h2, p এলিমেন্টে background-color প্রপার্টি ব্যবহার করা করা হয়েছে।
h1 { background-color: red; } h2 { background-color: blue; } p { background-color: green; }
Opacity প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়। এই প্রপার্টির মান 0.0 থেকে 1.0 পর্যন্ত নির্ধারণ করা যায়, এক্ষেত্রে সর্বচ্ছো মানের জন্য সর্বনিম্ন স্বচ্ছতা বা Transparency হয়।
নিচে একটি উদাহরণ দেখুন।
div { opacity: 0.4; }
RGBA পদ্ধতি ব্যবহার করেও কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়।
RGBA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -
rgba(red, green, blue, alpha)
এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।
নিচে একটি উদাহরণ দেখুন।
div { background: rgba(11,11, 180, 0.4); }
RGBA পদ্ধতি সম্পর্কে জানতে সিএসএস - রঙের মান টিউটোরিয়ালটি দেখুন।
opacity প্রপার্টি ব্যবহার করে স্বচ্ছতা নির্ধারণ করলে ঐ এইচটিএমএল এলিমেন্টের মধ্যস্থিত সকল এলিমেন্টেই স্বচ্ছতা বা Transparency যুক্ত হয়, কিন্তু RGBA পদ্ধতি ব্যবহার করে স্বচ্ছতা বা Transparency নির্ধারণ করলে, কেবল ঐ এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা যুক্ত হয়।
কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ কোন ছবি যুক্ত করতে সিএসএস এর background-image প্রপার্টি ব্যবহার করা হয়।
body { background-image: url("background.png"); }
সিএসএস এ ব্যাবহৃত জনপ্রিয় image format গুলো হল -
পূর্ব-নির্ধারিত বা default ভাবে এই ছবিটি সমস্ত এলিমেন্টের পৃষ্ঠদেশে বারবার প্রদর্শিত হয়।
background-image প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে কোন ছবি যুক্ত করলে তা বারবার প্রদর্শিত হয়। এই ছবিটির প্রদর্শন সংখ্যা নিয়ন্ত্রন করার জন্য background-repeat প্রপার্টি ব্যবহার করা হয়। অর্থাৎ ছবিটি কোন দিকে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা যায়।
background-repeat প্রপার্টির জন্য ৪টি মান নির্ধারণ করা যায়। নিচে এগুলো দেখুন -
background-repeat প্রপার্টির একটি উদাহরণ নিচে দেখুন।
body { background-image: url("background.png"); background-repeat: repeat-x; }
ওয়েব পেজটি scroll করে ওপর-নিচ করার সাথে পৃষ্টদেশ বা background এ নির্ধারিত ছবিটিও নড়বে কি না, তা নির্ধারণ করা হয় সিএসএস এর background-attachment প্রপার্টি ব্যবহার করে।
background-attachment প্রপার্টির ২ টি মান নির্ধারণ করা যায়। নিচে এগুলো দেখুন।
নিচে একটি উদাহরণ দেখুন।
body { background-image: url("background.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
যদি পৃষ্টদেশের নির্দিষ্ট কোন অংশে ছবি প্রদর্শন করার প্রয়োজন হয় তবে background-position প্রপার্টি ব্যবহার করে তা করা যায়।
ছবিটি কে পৃষ্টদেশ বা background এর কোন নির্দিষ্ট অংশে প্রদর্শন করার জন্য নীচে একটি উদাহরণ দেখুন -
body{ background-image:url('background.jpg'); background-repeat:no-repeat; background-position:right top; }
কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো ব্যাকগ্রাউন্ড প্রপার্টি একটি মাত্র সিএসএস ব্যাকগ্রাউন্ড প্রপার্টির মাধ্যমে প্রকাশ করা যায়। অর্থাৎ background-color, background-image, background-repeat, background-attachment এবং background-position এর জন্য আলাদা আলাদা ভাবে ব্যাকগ্রাউন্ড প্রপার্টি নির্দিষ্ট না করে একবার মাত্র ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করেই সবগুলো ব্যাকগ্রাউন্ড প্রপার্টি নির্দিষ্ট করে দেয়া যায়। একে বলে শর্টহ্যান্ড প্রপার্টি।
ব্যাকগ্রাউন্ডের সকল প্রপার্টিগুলোর শর্টহ্যান্ড প্রপার্টি হল background.
নীচে ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রপার্টি লেখার নিয়ম দেয়া হল -
body { background:#ffffff url('background.jpg') no-repeat fixed right top; }
শর্টহ্যান্ড প্রপার্টি ব্যবহার করার জন্য একটি নির্দিষ্ট সারি বা ক্রম অনুসরন করতে হবে। তা হল শর্টহ্যান্ড প্রপার্টিতে প্রথমে color তারপর background-image তারপর repeat তারপর attachment এবং সর্বশেষে position উল্লেখ করতে হবে। তবে এই ক্রম থেকে কোন প্রপার্টি বাদ গেলেও শর্টহ্যান্ড প্রপার্টি সঠিক ভাবে কাজ করবে।
ভার্সন | প্রকাশ সাল |
---|---|
background-color | কোন এলিমেন্টের পৃষ্ঠদেশের রং বা color নির্ধারণ করা হয়। |
background-image | কোন এলিমেন্টের পৃষ্ঠদেশে ছবি যুক্ত করা হয়। |
background-repeat | এলিমেন্টের পৃষ্ঠদেশে যুক্ত করা ছবি কোন দিকে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা হয়। |
background-attachment | পৃষ্ঠদেশে যুক্ত করা ছবিটি নড়বে কি না, তা নির্ধারণ করা হয় |
background-position | কোন এলিমেন্টের পৃষ্টদেশের নির্দিষ্ট কোন অংশে ছবি প্রদর্শন করা হয়। |
সিএসএস ব্যাকগ্রাউন্ড প্রপার্টি সম্পর্কে W3C এর CSS Backgrounds and Borders ও ওয়েব পেজটি দেখুন।