সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (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.}

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

আগের উদাহরনটির সব প্রোপার্টিজ উঠিয়ে দিয়ে এই কোড দিন একই কাজ হবে।
সিএসএস ৩ বেশ কিছু নতুন প্রোপার্টিজ এসেছে। IE (ইন্টারনেট এক্সপ্লোরার) আগের ভার্সনগুলি ছাড়া প্রায় সব ব্রাউজারেই এগুলি সাপোর্ট করে।

background-size নামে প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির সাইজ পরিবর্তন করা যায়। X এবং Y অক্ষ বরাবর ছবির সাইজ কেমন হবে সেটা % অথবা px/em দিয়ে ঠিককরা যায়। যেমন

1.background-size: 40% 80%;

2./* or */

3.background-size: 200px 100px;

প্রয়োগ দেখুন

শুধূমাত্র auto মান দি পারেন তাহলে পুরো ছবিটি দেখাবে।
এছাড়া আরো দুটি মান দেয়া যায়।
"contain" এবং "cover"
contain দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে।
আর cover দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে এবং পুরো এলিমেন্টটি যতদুর জায়গা জুড়ে আছে সেই পর্যন্ত ছড়িয়ে যাবে।
উপরের উদাহরনটিতে cover, contain দিয়ে দেখুন।

background-origin নামে আরেকটা নতুন প্রোপার্টি এসেছে সিএসএস ৩ এ। এর মান মান হতে পারে
"padding-box" দিলে ব্যাকগ্রাউন্ড ছবিটি এলিমেন্টের প্যাডিং (padding থাকলে) অংশেও দেখাবে।  
"content-box" দিলে শুধু কনটেন্টে (অর্থ্যাৎ এলিমেন্টে) এর ব্যাকগ্রাউন্ড হিসেবে দেখাবে।
আর "border-box" দিবেন যখন বর্ডার থাকবে এবং আপনি চান ব্যাকগ্রাউন্ড ছবি বর্ডারের নিচে সহ দেখাবে।

গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড
সিএসএস ৩ দিয়ে গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড তৈরী করা যায়, এটা করতে আগে ফটোশপে গ্রাডিয়েন্ড ছবি বানিয়ে সেটা ব্যাক্গ্রাউন্ড ছবি দিয়ে কাজ চালানো হত। যেমন আমাদের সাইটের উপরে ডানদিকের স্লোগান, সার্চ বাটন ইত্যাদিতে নিচের ব্যাকগ্রাউন্ড গ্রাডিয়েন্ট দেয়া হয়েছে।

1.#logo{

2./* mozila firefox 3.6 +*/

3. 

4.background:-moz-linear-gradient(center top , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;

5./* Safari 5.1, Chrome 10+ */

6. 

7.background:-webkit-linear-gradient(top, #76BF6B, #3B8230);

8.}

প্রথম লাইনটি মজিলাতে কাজ করে আর পরেরটি গুগল ক্রোমে। যেদুটি রংয়ের গ্রাডিয়েন্ট দিবেন সেদুটি -moz-linear-gradient বা -webkit-linear-gradient ভিতরে দিয়ে দিবেন যেমন আমি দিয়েছি।

** এখানে যে গ্রাডিয়েন্ট দিলাম এটা হচ্ছে লিনিয়ার মানে সোজা ব্যকগ্রাউন্ড।

radial background
================

1.#logo{

2. 

3./* mozila firefox 3.6 +*/

4.background : radial-gradient(circle , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;

5. 

6./* Safari 5.1, Chrome 10+ */

7.background:-webkit-radial-gradient(circle, #76BF6B, #3B8230);

8.}