CSS ব্যাকগ্রাউন্ড শর্টহ্যান্ড

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

PropertyDescription
backgroundএটি ব্যাকগ্রাউন্ড সর্টহেন্ড এ ব্যবহার হয় এবং সবগুলো ব্যাকগ্রাউন্ড প্রোপার্টির ভেলু নিতে পারে ।
background-attachmentঠিক করে যে একটি ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করবে নাকি স্থির থাকবে ।
background-clipব্যাকগ্রাউন্ড এর পেইন্টং এরিয়া ঠিক করে ।
background-colorএকটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার ঠিক করে ।
background-imageএকটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ ঠিক করে ।
background-originব্যাকগ্রাউন্ড ইমেজ টি কন্টেন্ট বক্স নাকি বর্ডার বক্স এর সাপেক্ষে পজিশন নিবে সেটি ঠিক করে দেয় ।
background-positionব্যাকগ্রাউন্ড ইমেজ এর শুরুর পয়েন্ট টি, অর্থাৎ কোন জায়গা থেকে পজিশন নিবে সেটি ঠিক করে দেয়।
background-repeatব্যাকগ্রাউন্ড ইমেজেটি বারবার আসবে কিনা, সেটি ঠিক করে দেয়।
background-sizeব্যাকগ্রাউন্ড ইমেজেটির সাইজ ঠিক করে দেয় ।

কমেন্ট করুন

Your email address will not be published. Required fields are marked *