Thuta Learning
ရှာဖွေရန်
BasicWeb Developmentbeginner

Backgrounds

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Background color/image ကိုထိန်းချုပ်တတ်ရန်

Background ကို အရောင်တစ်ခုတည်းမဟုတ်ဘဲ image, gradient, position, size စတာတွေနဲ့လည်းထိန်းနိုင်ပါတယ်။ Landing page hero section တွေမှာ gradient background သုံးတာများပြီး card UI တွေမှာ subtle background color သုံးတာဖတ်ရလွယ်စေပါတယ်။ Background image သုံးတဲ့အခါ စာသားဖတ်လို့မရအောင် မရှုပ်အောင် overlay သို့မဟုတ် opacity ထည့်စဉ်းစားသင့်ပါတယ်။

css
.hero {
  min-height: 420px;
  background-color: #101827;
  background-image: linear-gradient(135deg, #101827, #123b52);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
You should see
Hero section မှာ dark blue gradient background ပေါ်လာပြီး background က section တစ်ခုလုံးကို သပ်သပ်ရပ်ရပ်ဖုံးပေးပါမယ်။

Warning

Background image ကြီးလွန်းရင် page load နှေးနိုင်ပါတယ်။ WebP/optimized image သုံးတာပိုကောင်းပါတယ်။

Backgrounds | Thuta Learning