CSSBeginner

CSS Background

background-color, background-image, repeat, position, size — background-এর সম্পূর্ণ বাংলা গাইড।

11টি অংশবাংলা ভাষায়

একটি element-এর পটভূমি সাজাতে background-সংক্রান্ত বিভিন্ন property ব্যবহার হয়।

background-color

.card {
  background-color: #f9fafb;
}

.hero {
  background-image: url("banner.jpg");
}

.hero {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

property	কাজ
background-repeat	ছবি কীভাবে পুনরাবৃত্ত হবে
background-position	ছবির অবস্থান (center, top-left...)
background-size	ছবির মাপ (cover / contain / px)
background-attachment	স্ক্রলের সাথে ছবি চলবে নাকি স্থির

.hero {
  background: #111 url("hero.jpg") no-repeat center / cover;
}

cover বনাম contain

cover পুরো এলাকা পূরণ করে (ছবি ক্রপ হতে পারে), contain পুরো ছবিটি দেখায় (ফাঁকা জায়গা থাকতে পারে)। Hero সেকশনে প্রায়ই cover ব্যবহার হয়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।