CSS-এ সবচেয়ে সাধারণ প্রশ্নों में একটি হলো: background এবং background-color-এর মধ্যে পার্থক্য কী? এটি বিভ্রান্তিকর কারণ ডেভেলপাররা প্রায়শই একই অর্থে এই দুটি প্রোপার্টি ব্যবহার করেন।
কিন্তু এগুলো এক নয়। background (বिना -color) প্রোপার্টিটি একটি এলিমেন্টের সকল ব্যাকগ্রাউন্ড প্রোপার্টি একসাথে সেট করতে পারে। উদাহরণস্বরূপ, আপনি একসাথে ব্যাকগ্রাউন্ড কালার, একটি ইমেজ (no-repeat), এবং ইমেজের পজিশন সেট করতে পারেন এক লাইনে:
background: #444 url("image.jpg") no-repeat left top;উপরোক্ত কোড নিচের মতোও লেখা যায়:
background-image: url("url/image.jpg"); background-repeat: no-repeat; background-position-x: left; background-position-y: top; background-color: #444;সুতরাং background প্রোপার্টিটি একটি সুবিধাজনক শর্টহ্যান্ড যা একাধিক ডিক্লেরেশন এক লাইনে প্রয়োগ করতে পারে এবং কোডের লাইন সংখ্যা কমাতে সাহায্য করে।
ডিক্লেরেশন = CSS প্রোপার্টি + মান।
দूसरी ओर, background-color প্রোপার্টিটি শুধুমাত্র একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করতে পারে। এটি বড় background প্রোপার্টির একটি উপসেট (অংশ)।
গুরুত্বপূর্ণ: background প্রোপার্টি সমস্ত পূর্বের ডিক্লেরেশন রিসেট করে — সতর্ক থাকুন!
যদি আপনি আগে কোনো এলিমেন্টে বিভিন্ন ব্যাকগ্রাউন্ড ডিক্লেরেশন প্রয়োগ করে থাকেন (যেমন background-color বা background-image), এবং পরে সে এলিমেন্টে background: red যোগ করেন, তবে আপনার সব পূর্বের ডিক্লেরেশন রিসেট হয়ে যাবে। এখন আপনার এলিমেন্টের ব্যাকগ্রাউন্ড লাল হবে, এবং ব্যাকগ্রাউন্ড ইমেজটি মুছে যাবে।
উদাহরণ
নিচের CodePen উদাহরণটি দেখুন, যেখানে তিনটি div এলিমেন্ট আছে একই .box ক্লাসের সাথে। প্রথম এলিমেন্টে শুধু .box ক্লাস, বাকি দুটিতে অতিরিক্ত ইউটিলিটি ক্লাস .bg-red এবং .bg-blue।
CodePen উদাহরণটি দেখুন।
ফার্ক লক্ষ্য করলেন?
দ্বিতীয় বক্স সম্পূর্ণ লাল, কোনো ইমেজ নেই, যদিও এর .box ক্লাস স্পষ্টভাবে বলে যে এতে অন্য দুটি এলিমেন্টের মতো JavaScript ইমেজ থাকা উচিত।
HTML
<div class="box"> </div> <div class="box bg-red"> </div> <div class="box bg-blue"> </div>CSS
.box { margin: 1rem; height: 100px; width: 150px; background-color: black; background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg"); background-repeat: no-repeat; } .bg-red { background: red; } .bg-blue { background-color: blue; }CSS-এ .bg-red এবং .bg-blue প্রোপার্টিগুলো ঘনিষ্ঠভাবে পরীক্ষা করুন। লাল ক্লাসটি 'মাস্টার' (সর্ব-সমাবেশী) background প্রোপার্টি ব্যবহার করে লাল কালার সেট করেছে, যেখানে নীল ক্লাসটি একক উদ্দেশ্যে background-color ব্যবহার করেছে।
.bg-red ক্লাসের background প্রোপার্টিটি দ্বিতীয় div এলিমেন্টের অন্যান্য সব ব্যাকগ্রাউন্ড ডিক্লেরেশন (-image, -repeat, -color) সরিয়ে শুধু নির্দিষ্ট red মানকে ঐ এলিমেন্টের একমাত্র ব্যাকগ্রাউন্ড অ্যাট্রিবিউট হিসেবে যোগ করে।
তাই, আপনি যদি শুধু নির্দিষ্ট এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে চান, তবে নিশ্চিত করুন যে আপনি background-color ব্যবহার করছেন, background নয় — অন্যথায় আপনি ঐ এলিমেন্টের পূর্বের সব background- ডিক্লেরেশন ওভাররাইট করে ফেলবেন।
কখনো কখনো, সকল পূর্বের ডিক্লেরেশন রিসেট করা আপনার ইচ্ছিত ফলাফল দিতে পারে। আপনি একটি ওয়েবসাইটে কাজ করছেন যাতে লেগেসি কোড আছে যেটি আপনি পরিবর্তন করতে চান না (বা করতে পারছেন না), কিন্তু একটি নির্দিষ্ট এলিমেন্ট ম্যানিপুলেট করতে চান যেটিতে ইতিমধ্যে অনেক ডিক্লেরেশন আছে — সেটি একটি নতুন একক ডিক্লেরেশন মান (যেমন কালার) দিয়ে রিপ্লেস করতে চান — সেক্ষেত্রে background ব্যবহার করা একটি চমৎকার টুল।
