সিএসএস ব্যাকগ্রাউন্ড - CSS Background


কোন এলিমেন্টের জন্য ব্যাকগ্রাউন্ড এর স্টাইল খুব গুরুত্বপূর্ণ। ওয়েব পেজের ব্যাকগ্রাউন্ডে বিভিন্ন স্টাইল যুক্ত করতে সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো ব্যবহার করা হয়।


ব্যাকগ্রাউন্ড প্রপার্টি

সিএসএস এর ব্যাকগ্রাউন্ড প্রপার্টি গুলো নিচে দেখুন।


background-color

কোন এলিমেন্টের ব্যাকগ্রাউন্ডের রং বা color নির্ধারণ করতে সিএসএস ব্যাকগ্রাউন্ড কালার (background-color) প্রপার্টি ব্যবহার করা হয়।

নিচে একটি উদাহরণ দেখুন, যেখানে কোন এইচটিএমএল ডকুমেন্টের body তে ব্যাকগ্রাউন্ড কালার নির্ধারণ করা হয়েছে।

উদাহরণ

body {
     background-color: body;
     }


কোড এডিটর


বিভিন্ন পদ্ধতিতে কালার উল্লেখ করা যায়। তার মাঝে উল্লেখযোগ্য পদ্ধতিগুলো হল -

সিএসএস এ ব্যবহার করার জন্য বিভিন্ন রঙের নাম ও মান জানতে সিএসএস - রঙের নামসিএসএস - রঙের মান টিউটোরিয়াল গুলো দেখুন।


কোন এলিমেন্টে background-color ব্যবহার

অন্য যে কোন এইচটিএমএল এলিমেন্টে background-color প্রপার্টি ব্যবহার করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে h1, h2, p এলিমেন্টে background-color প্রপার্টি ব্যবহার করা করা হয়েছে।

উদাহরণ

h1 {
   background-color: red;
   }

h2 {
   background-color: blue;
   }

p {
   background-color: green;
   }


কোড এডিটর



Opacity প্রপার্টি

Opacity প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়। এই প্রপার্টির মান 0.0 থেকে 1.0 পর্যন্ত নির্ধারণ করা যায়, এক্ষেত্রে সর্বচ্ছো মানের জন্য সর্বনিম্ন স্বচ্ছতা বা Transparency হয়।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

div {
  opacity: 0.4;
}


কোড এডিটর



RGBA ব্যবহার করে ব্যাকগ্রাউন্ডে স্বচ্ছতা তৈরি

RGBA পদ্ধতি ব্যবহার করেও কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা তৈরি করা যায়।

RGBA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -

rgba(red, green, blue, alpha)

এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

div {
    background: rgba(11,11, 180, 0.4);
    }


কোড এডিটর


RGBA পদ্ধতি সম্পর্কে জানতে সিএসএস - রঙের মান টিউটোরিয়ালটি দেখুন।

opacity প্রপার্টি ব্যবহার করে স্বচ্ছতা নির্ধারণ করলে ঐ এইচটিএমএল এলিমেন্টের মধ্যস্থিত সকল এলিমেন্টেই স্বচ্ছতা বা Transparency যুক্ত হয়, কিন্তু RGBA পদ্ধতি ব্যবহার করে স্বচ্ছতা বা Transparency নির্ধারণ করলে, কেবল ঐ এলিমেন্টের পৃষ্ঠদেশে বা background এ স্বচ্ছতা যুক্ত হয়।


background-image

কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে বা background এ কোন ছবি যুক্ত করতে সিএসএস এর background-image প্রপার্টি ব্যবহার করা হয়।

উদাহরণ

body {
    background-image: url("background.png");
    }


কোড এডিটর


সিএসএস এ ব্যাবহৃত জনপ্রিয় image format গুলো হল -

পূর্ব-নির্ধারিত বা default ভাবে এই ছবিটি সমস্ত এলিমেন্টের পৃষ্ঠদেশে বারবার প্রদর্শিত হয়।


background-repeat

background-image প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশে কোন ছবি যুক্ত করলে তা বারবার প্রদর্শিত হয়। এই ছবিটির প্রদর্শন সংখ্যা নিয়ন্ত্রন করার জন্য background-repeat প্রপার্টি ব্যবহার করা হয়। অর্থাৎ ছবিটি কোন দিকে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা যায়।

background-repeat প্রপার্টির জন্য ৪টি মান নির্ধারণ করা যায়। নিচে এগুলো দেখুন -

background-repeat প্রপার্টির একটি উদাহরণ নিচে দেখুন।

উদাহরণ

body {
    background-image: url("background.png");
    background-repeat: repeat-x;
    }


কোড এডিটর



background-attachment

ওয়েব পেজটি 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-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 ও ওয়েব পেজটি দেখুন।