কোন এলিমেন্টের জন্য ব্যাকগ্রাউন্ড এর স্টাইল খুব গুরুত্বপূর্ণ। ওয়েব পেজের ব্যাকগ্রাউন্ডে বিভিন্ন স্টাইল যুক্ত করতে সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড প্রপার্টি
সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো নিচে দেখুন।
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
কোন এলিমেন্টের ব্যাকগ্রাউন্ডের রং বা color নির্ধারণ করতে সিএসএস ব্যাকগ্রাউন্ড কালার (background-color) প্রপার্টি ব্যবহার করা হয়।
উদাহরণ
body {
background-color:red;
}
কোন এলিমেন্টে background-color ব্যবহার
আপনি যদি কোন লেখার ব্যাকগ্রাউন্ড দিতে চান তাহলে আপনাকে যে কাজ করতে হবে । তা নিচে দেওয়া হলো
উদাহরনঃ
h1{
background-color:red;
}
Opacity প্রপার্টি
Opacity প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়। এই প্রপার্টির মান 0.0 থেকে 1.0 পর্যন্ত নির্ধারণ করা যায়, এক্ষেত্রে সর্বচ্ছো মানের জন্য সর্বনিম্ন স্বচ্ছতা বা Transparency হয়।
উদাহরণ:
div {
opacity: 0.4;
}
RGBA ব্যবহার করে ব্যাকগ্রাউন্ডে স্বচ্ছতা তৈরি
RGBA পদ্ধতি ব্যবহার করেও কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়।
উদাহরণ:
div {
background: rgba(11,11, 180, 0.4);
}
background-image
কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ কোন ছবি যুক্ত করতে সিএসএস এর background-image প্রপার্টি ব্যবহার করা হয়।
উদাহরণ
body {
background-image: url("../ফাইল নাম/image নাম. image format গুলো png");
}
background-repeat
- background-image প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে কোন ছবি যুক্ত করলে তা বারবার প্রদর্শিত হয়। এই ছবিটির প্রদর্শন সংখ্যা নিয়ন্ত্রন করার জন্য background-repeat প্রপার্টি ব্যবহার করা হয়। অর্থাৎ ছবিটি কোন দিকে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা যাbackground-repeat প্রপার্টির জন্য ৪টি মান নির্ধারণ করা যায়। নিচে এগুলো দেখুন -repeat - এলিমেন্টের পৃষ্ঠদেশে সম্পূর্ণ উলম্ব এবং আনুভুমিক দিক জুরে ছবি প্রদর্শিত হবে।
- repeat-x - এলিমেন্টের পৃষ্ঠদেশে সম্পূর্ণ আনুভুমিক দিক জুরে ছবি প্রদর্শিত হবে।
- repeat-y - এলিমেন্টের পৃষ্ঠদেশে সম্পূর্ণ উলম্ব দিক জুরে ছবি প্রদর্শিত হবে।
- no-repeat - এলিমেন্টের পৃষ্ঠদেশে মাত্র একবার ছবি প্রদর্শিত হবে।
উদাহরণ:
back_img{
background-image: url("background.png");
background-repeat: repeat-x;
Background-repeat:repeat-y;
Background-repeat:on-repeat;
}
background-attachment
- ওয়েব পেজটি scroll করে ওপর-নিচ করার সাথে পৃষ্টদেশ বা background এ নির্ধারিত ছবিটিও নড়বে কি না, তা নির্ধারণ করা হয় সিএসএস এর background-attachment প্রপার্টি ব্যবহার করbackground-attachment প্রপার্টির ২ টি মান নির্ধারণ করা যায়। নিচে এগুলো দেখুন।fixed - এই মানের জন্য ছবিটি পৃষ্টদেশে স্থির থাকবে,
scroll - এই মানের জন্য ওয়েব পেজ scroll করার সাথে ছবিটিও পৃষ্টদেশে scroll করবে।উদাহরণ:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
background-position
যদি পৃষ্টদেশের নির্দিষ্ট কোন অংশে ছবি প্রদর্শন করার প্রয়োজন হয় তবে background-position প্রপার্টি ব্যবহার করে তা করা যায়
উদাহরণ:
body{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-position:right top;
}
শর্ট-হ্যান্ড প্রপার্টি
কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো ব্যাকগ্রাউন্ড প্রপার্টি একটি মাত্র সিএসএস ব্যাকগ্রাউন্ড প্রপার্টির মাধ্যমে প্রকাশ করা যায়। অর্থাৎ background-color, background-image, background-repeat, background-attachment এবং background-position এর জন্য আলাদা আলাদা ভাবে ব্যাকগ্রাউন্ড প্রপার্টি নির্দিষ্ট না করে একবার মাত্র ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করেই সবগুলো ব্যাকগ্রাউন্ড প্রপার্টি নির্দিষ্ট করে দেয়া যায়। একে বলে শর্টহ্যান্ড প্রপার্টউদাহরণ:
body {
background:#ffffff url('background.jpg') no-repeat fixed right top;
}
