CSS Background এর যে ছোট ছোট উদাহরন গুলো দেখেছি, সেই কোড সংক্ষিপ্ত করতে ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রপার্টি ব্যবহার করা যায় ।
CSS ব্যাকগ্রাউন্ড – শর্টহ্যান্ড প্রপার্টি
নিচের কোড গুলো দেখুন ।
body {
background-color: #ffffff;
background-image: url("cup-of-tea.jpg");
background-repeat: no-repeat;
background-position: right top;
}ব্যাকগ্রাউন্ড এর বিভিন্ন প্রোপার্টি গুলো আমরা আগেই ব্যবহার করেছি ।
কিন্তু CSS ব্যাকগ্রাউন্ড শর্টহ্যান্ড ব্যবহার করে আমরা আপরের কোড কে অনেক সংক্ষিপ্ত করে নিতে পারি।
উদাহরন
body {
background: #ffffff url("cup-of-tea.jpg") no-repeat right top;
}
শর্টহ্যান্ড প্রপার্টি ব্যবহার করার সময় প্রপার্টি গুলোর মানগুলির ক্রম হল
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
উপরের প্রপার্টি গুলোর যে কোন একটি অনুপস্থিত থাকলেও সমস্যা নেই । তবে ক্রম ঠিক রাখতে হবে ।
উপরের উদাহরন টি খেয়াল করলে দেখতে পাবেন যে আমরা background-attachment property ব্যবহার করিনি ।
সবগুলো CSS Background Properties
| Property | Description |
| background | এটি ব্যাকগ্রাউন্ড সর্টহেন্ড এ ব্যবহার হয় এবং সবগুলো ব্যাকগ্রাউন্ড প্রোপার্টির ভেলু নিতে পারে । |
| background-attachment | ঠিক করে যে একটি ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করবে নাকি স্থির থাকবে । |
| background-clip | ব্যাকগ্রাউন্ড এর পেইন্টং এরিয়া ঠিক করে । |
| background-color | একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার ঠিক করে । |
| background-image | একটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ ঠিক করে । |
| background-origin | ব্যাকগ্রাউন্ড ইমেজ টি কন্টেন্ট বক্স নাকি বর্ডার বক্স এর সাপেক্ষে পজিশন নিবে সেটি ঠিক করে দেয় । |
| background-position | ব্যাকগ্রাউন্ড ইমেজ এর শুরুর পয়েন্ট টি, অর্থাৎ কোন জায়গা থেকে পজিশন নিবে সেটি ঠিক করে দেয়। |
| background-repeat | ব্যাকগ্রাউন্ড ইমেজেটি বারবার আসবে কিনা, সেটি ঠিক করে দেয়। |
| background-size | ব্যাকগ্রাউন্ড ইমেজেটির সাইজ ঠিক করে দেয় । |