সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background Tutorial in Bangla)

 

সিএসএস ব্যাক্রগ্রাউন্ড একটি গুরত্বপূর্ন বিষয়। এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড পরিবর্তনের জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। নিচে আলোচনা করা হল।

 

ব্যাকগ্রাউন্ড রং

background-color নামে একটা প্রোপার্টিজ আছে এটার মান যেকোন রং দিতে পারেন। হেক্সাডেসিমাল (যেমন #fff000, #000000 ইত্যাদি), RGB (যেমন rgb(192,192,192), rgb(255,255,0) ইত্যাদি) কিংবা রংয়ের নাম (যেমন maroon, black, red ইত্যাদি) যেকোনটি দিলেই কাজ হবে। কোন মান না দিলে বাই ডিফল্ট "transparent" নেয়।

 

ব্যাকগ্রাউন্ড ছবি

background-image নামে একটা প্রোপার্টিজ আছে এটা দিয়ে এলিমেন্টের পেছনে যেকোন ছবি দেয়া যায়। এর মান দিতে হয় এভাবে

1.background-image : url(path/to/image);

url এর ভিতর ছবির উৎস দেখিয়ে দিতে হবে।

 

ব্যাকগ্রাউন্ড পূনরাবৃত্তি

background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ডে থাকা ছবি (যদি background-image থাকে) কিভাবে বা কোনদিকে পূনরাবৃত্তি (repeat) হবে সেটা ঠিক করে দেয়া যায়। যেমন

1.background-repeat: repeat;

"repeat" দিলে X এবং Y উভয় অক্ষ বরাবর ছবিটির পূনরাবৃত্তি হবে, বাই ডিফল্ট এটাই থাকে। এছাড়া এর আরও ৩ টি মান দেয়া যায়: 

"no-repeat" দিলে কোন পূনরাবৃত্তি হবেনা।

"repeat-x" দিলে শুধু X অক্ষ বরাবর রিপিট হবে

"repeat-y" দিলে Y অক্ষ বরাবর রিপিট হবে।

 

ব্যাকগ্রাউন্ডের অবস্থান

 background-position প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির অবস্থান ইচ্ছে মত অবস্থানে আনা যায়। বাই ডিফল্ট এর মান থাকে 0% 0%

এর সম্ভাব্য মান হতে পারে

01.background-position:left top;

02.background-position:left center;

03.background-position:left bottom;

04.background-position:center top;

05.background-position:center center;

06.background-position:center bottom;

07.background-position:right top;

08.background-position:right center;

09.background-position:right bottom;

10.background-position:x% y%;

11.background-position:Xpx Ypx;

12.background-position:inherit;

মানগুলি দেখেই বোঝা যাচ্ছে কোন্ মান দিলে ছবিটি কোন্ দিকে থাকবে। শেষের ৩ লাইনের x% y% এর অর্থ হল X অক্ষ থেকে কতভাগ দুরে এবং y% মানে হল Y অক্ষ থেকে কত দুরে। যেকোন একটা মান দিলে বাকিটির মান 50% হয়ে থাকে। সবার উপরে বাদিকে 0% 0% ধরে কাজ হবে।

 

** left center, left top ইত্যাদি মানগুলি দেয়ার সময় যদি যেকোন একটা দেন তবে বাকিটি center নিয়ে নেবে।

 

% এর মান পিক্সেল দিয়ে দেয়া যাবে। আর inherit দিলে প্যারেন্ট এলিমেন্টের টি পাবে।

 

background-attachment নামে আরেকটা প্রোপার্টি আছে এটার মান হতে পারে "scroll" (এটা বাই ডিফল্ট থাকে) আর "fixed"। scroll থাকলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ডও স্ক্রল করবে (যদি কনটেন্ট, ব্রাউজার উইন্ডোর চেয়ে লম্বা হয়) এবং fixed দিলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ড সরবেনা।

সবগুলি দিয়ে একটা উদাহরন

1.#header{

2.background-color: #5d8e50;

3.background-image:url(/images/stories/pos_back.jpg);

4.background-repeat: no-repeat;

5.background-position: center right;

6.}

 

সবগুলি প্রোপার্টিজের একসাথে ব্যবহার

===========================

background প্রোপার্টি দিয়ে উপরের সবগুলি একসাথে ব্যবহার করা যায়। মানগুলি একটা একটা করে স্পেস দিয়ে দিতে হয়।

যেমন ১ নম্বরে দিতে হয় background-color এর মান এরপর background-image এরপর background-repeat এরপর background-position সবশেষে background-attachment.

1.#header{

2.background: #5d8e50 url(/images/stories/pos_back.jpg) no-repeat  center right scroll;

3.}

 

** প্রতিটি মানের মাধে অবশ্যই একটা স্পেস দিতে হবে

 

আগের উদাহরনটির সব প্রোপার্টিজ উঠিয়ে দিয়ে এই কোড দিন একই কাজ হবে।