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 သုံးတာပိုကောင်းပါတယ်။