Background

CSS Backgrounds

CSS Background နဲ့ပတ်သတ်ပြီး ရေရေလည်လည် နားလည်သွားအောင်ပြောပြပေးသွားပါမယ်၊ CSS လေ့လာပြီဆိုရင် Box Model တော့ သိလိမ့်မယ် ဟုတ်တယ်ဟုတ်

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

CSS မှာ အခြေခံအကျဆုံးက Box Model ပဲ၊ border-box, padding-box, content-box ဆိုပြီး ရှိကြတယ်၊ Background အကြောင်းပြောရင် Box Model ကချန်ခဲ့လို့မရဘူး၊ Box တွေရဲ့ behaviour ကို display နဲ့ဆုံးဖြတ်တယ် အများကြီးတော့ ထည့်မပြောတော့ဘူး

CSS Box တိုင်းရဲ့အနောက်မှာ background layer ဆိုပြီးတော့ special layer တစ်ခုရှိတယ် content တွေရဲ့အနောက်မှာ ပေါ်တယ်၊ ပေါ်တဲ့ Area က padding-box ကနေစပြီးပေါ်တယ်

Content Box > Padding Box > Border Box > Background Box > Shadow Box

ဒီလို အကြမ်းဖျင်းမှတ်လို့ရတယ်

background-color

background ကနေ သတ်မှတ်ပေးလို့ရတဲ့ အရိုးရှင်းဆုံး effect ကတော့ Color ပေါ့

background-color သည် initial တန်ဖိုးက transparent ဖြစ်တယ် color တန်ဖိုးကို color function တွေဖြစ်တဲ့ rgb, hsl တို့လိုကောင်တွေနဲ့ သတ်မှတ်ပေးလို့ရသလို hex တန်ဖိုးအနေနဲ့လည်း ရတယ်

background-color layer ရဲ့ အထက်မှာမှ background-image layer ရှိမယ် background-image ကိုတန်ဖိုးအနေနဲ့

• url function သုံးပြီး image data url ကို ပေးလို့ရသလို

• gradient function တွေကိုလည်း သတ်မှတ်ပေးလို့ရတယ်

.container {
   background-image: url(./bg.png);
   /* or */
   background-image: linear-gradient(rebeccapurple, teal);
}

တခြား Gradient function တွေဖြစ်တဲ့ radial-gradient , conic-gradient တို့ကိုလည်း သုံးလို့ရတယ်

background-repeat

နောက်တစ်ခုက background-repeat

background image သတ်မှတ်ပေးတဲ့အခါ image size က view port element ရဲ့ size အောက်ငယ်နေမယ်ဆိုရင် image တွေက ပြည့်တဲ့အထိ repeat လုပ်သွားမယ်

တန်ဖိုးတွေအနေနဲ့

repeat, no-repeat, repeat-x, round, space ဒီလိုသုံးလို့ရမယ် တစ်ခါတစ်လေမှာ တန်ဖိုးကို နှစ်ခုလည်း ထားပေးလို့ရတယ် horizontal and vertical ဒါမှမဟုတ် x နဲ့ y လို့ပြောလို့ရတယ်

background-repeat: repeat space;

repeat ကတော့ရှင်းတယ် vertical and horizontal မှာ repeat လုပ်သွားမယ် initial တန်ဖိုးပေါ့ no-repeat ကတော့ repeat မလုပ်ဖို့အတွက်သုံးတယ်

repeat-x ကတော့ horizontal မှာ repeat လုပ်သွားတယ်

repeat လုပ်တဲ့အခါမှာ မဆံ့တဲ့ပုံကို cropped or clipped လုပ်သွားတယ် round ကကျတော့ view port element size ပေါ်မူတည်ပြီး stretch လုပ်သွားတယ်

space ကတော့ repeat လုပ်မယ် ဒါပေမယ့် ပုံတွေကို crop မလုပ်ဘူး လိုတဲ့နေရာကို space ခြားမယ် ဒီလိုသုံးတယ်

background-position

background-repeat ကို no-repeat ထားတဲ့အခါမှာ ပုံကသေးနေရင် ဒီပုံကို ဘယ် position မှာ ပေါ်မလဲဆိုတာကို background-position နဲ့သတ်မှတ်ပေးလို့ရတယ် တန်ဖိုးကို horizontal and vertical တွဲပေးလို့ရတယ် ပထမကောင်က horizontal ဒုတိယကောင်က vertical

background-position: left 50%;
/* or */
background-position: left top;

သဘောက

background-position: x y;

x အတွက် left, right, center သုံးလို့ရမယ် နောက် number တွေနဲ့သုံးလို့ရမယ် y အတွက် top, bottom, center သုံးလို့ရမယ် နောက် number တွေသုံးလို့ရမယ် x မှာလာပြီး top, bottom တွေသုံးလို့မရဘူး background-position-x , background-position-y ဆိုပြီးတော့လည်း ခွဲသုံးလို့ရတယ် တန်ဖိုးကိုတစ်ခုတည်းလည်း သုံးလို့ရမယ် မထည့်ပေးတဲ့ကောင်သည် center 50% ဖြစ်မယ်

background:left;

left သည် x တန်ဖိုးဖြစ်တယ် y က မပါလို့ 50% ဖြစ်နေမယ်၊ ဒါကြောင့် ဘယ်ဘက်ကိုကပ်ပြီး အထက်အောက်အလည်မှာရှိနေမယ်

background:bottom;

bottom သည် y တန်ဖိုးဖြစ်တယ် x မပါလို့ 50% ဖြစ်နေမယ်၊ ဒါကြောင့် ဘေးတိုက်အလည်မှာရှိနေပြီးတော့ အထက်အောက်က အောက်ဘက်မှာ ကပ်နေမယ်

background-position သည် parameter လေးခုအထိလက်ခံတယ်၊ အပေါ်က နမူနာထိက တစ်ခု နှစ်ခုပဲ ရှိသေးတယ်

parameter သုံးခု လေးခု သုံးတဲ့အခါ number value တန်ဖိုးကို အရှေ့ဆုံးမှာထားလို့မရဘူး top, right, bottom, left တွေရဲ့အနောက်မှာကပ်လိုက်ရတယ် မပါလည်းရတယ်

background-position: bottom 88% right;

အဓိပ္ပါယ်က bottom ကနေ 88% မှာရှိမယ် right မှာကပ်မယ်

background-position: right bottom 88%;

ဒါကတော့ right မှာကပ်မယ် bottom ကနေ 88% မှာရှိမယ် အပေါ်ကကောင်နဲ့အတူတူပဲ

number value နဲ့စလို့မရဘူးဆိုတာ ဘယ်လိုပုံစံကိုပြောတာလဲဆိုတော့

background-position: 88% bottom right;

ဒါမျိုးရေးရင် အလုပ်မလုပ်ဘူး

အကျဉ်းချုံးပြောရရင်

background-position: edge offset edge;

ဒါကိုပြောတာဖြစ်တယ် offset တန်ဖိုးသည် edge နောက်မှာပဲလိုက်လို့ရတယ် အရှေ့ဆုံးမှာ မရှိနိုင်ဘူး

background-size

background-image ရဲ့ size သည် default အနေနဲ့ auto ဖြစ်နေမယ် ဆိုလိုတာက ပုံရဲ့ width and height aspect ratio အတိုင်းရှိနေမယ်

auto မှာ ပုံက width 3000px ဆိုရင် 3000px အတိုင်းရှိမယ် view port element က width 200px ပဲရှိရင် 3000px ရဲ့ 200px နေရာလေးကိုပဲမြင်ရမယ်

ဒါကိုမှပြောင်းပြီးသတ်မှတ်ချင်တဲ့အခါ background-size ကိုသုံးတယ် auto အပြင် cover, contain, number value တွေလည်း သုံးလို့ရတယ်

cover ရဲ့အဓိပ္ပါယ်က image size သည် view port element ကို ဖုံးသွားတဲ့အထိ ချဲ့ပစ်တယ် element အပြည့်ပေါ်မယ် ဒါပေမယ့် zoom လုပ်လိုက်သလိုဖြစ်နေမယ်

contain ကတော့ image ကို view port element ရဲ့ width အတိုင်းပေါ်မယ် သူ့ရဲ့နဂို aspect ratio အတိုင်းဖြစ်မယ်၊ အဲ့ဒီမှာ height က element height အောက်ငယ်သွားရင် လွတ်နေတဲ့ space တွေမှာ repeat ဖြစ်နေလိမ့်မယ် no-repeat မထားခဲ့ရင်ပေါ့

background-attachment

attach ဆိုတဲ့အဓိပ္ပါယ်ကိုက တွဲထားတယ် ချည်ထားတယ် ချိတ်ထားတယ်လို့ပြောတယ် background-attachment ဘာကြောင့်သုံးလဲဆိုတော့ background-image သည် scroll event ဖြစ်ရင် element နဲ့တွဲပါသွားမှာလား တစ်နေရာထဲမှာရပ်နေမှာလား ဒါမှမဟုတ် content က overflow:scroll ဖြစ်တဲ့အချိန်မှာ content နောက်ကပ်လိုက်နေမှာလား အဲ့ဒီလိုမျိုးသတ်မှတ်ပေးဖို့အတွက်သုံးတယ်

default initial က scroll

background-attachment:scroll;

scroll က scroll လိုက်ရင် element နဲ့တွဲပါသွားတာကိုပြောတာ element ကို attach ဖြစ်မယ်ပေါ့

fixed ကကျတော့ viewport တစ်ခုလုံးကြီးမှာရှိနေမယ် ဆိုလိုတာက html root element မှာသွားပြီး attach ဖြစ်နေတာကိုပြောတာ

local ကကျတော့ content က overflow:scroll ဖြစ်တဲ့အချိန်မှာ content ကို attach လုပ်မယ်လို့ပြောတာ

background-origin

origin ဆိုတာ အစကိုပြောတာ background-origin ကို background-image သည် ဘယ်နယ်နမိတ်ကနေစပေါ်မလဲဆိုတာကို သတ်မှတ်ဖို့အတွက်သုံးတယ် ဥပမာ content-box, padding-box, border-box အဲ့ဒီလိုစပေါ်မယ့် box area ကို သတ်မှတ်ပေးဖို့သုံးတယ်

background-image ရဲ့ default origin သည် padding-box ဆိုတာကို အပေါ်မှာပြောခဲ့ပြီးပြီဖြစ်တယ်

background-clip

clip ဆိုတာ ညှပ်ထုတ်လိုက်တာ crop လုပ်လိုက်တယ်လို့ပြောလည်းရတယ် ဘာကြောင့် background-clip သုံးလဲဆိုတော့ background-image သည် element width အပြည့်ရှိနေတဲ့အချိန်မှာ သတ်မှတ်ပေးလိုက်တဲ့ box area ကနေကျော်သွားတဲ့ image area ကို clip ဒါမှမဟုတ် crop လုပ်ချင်လို့သုံးတယ် background-origin နဲ့မတူတာကို သတိထားရမယ်

သူ့မှာ content-box, padding-box, border-box အပြင် background-clip:text လည်းရှိပါသေးတယ် သူကတော့ text ရဲ့ color မှာ background-image ကိုပြတယ် အဲ့ဒီအပြင်ကဟာတွေကိုတော့ clip လုပ်ပစ်လိုက်တယ်

background-clip:text; သည် background-attachment:fixed နဲ့တွဲသုံးလို့မရတာကို သတိထားရမယ်

Design problem

border နဲ့ background-image တွဲသုံးရင် ဖြစ်တဲ့ပြဿနာတစ်ခုရှိပါတယ်

အောက်ကပုံမှာ button ရဲ့ border-color ကို transparent အဖြစ်ထားပြီး background-image ကို gradient function နဲ့သတ်မှတ်ပေးထားပါတယ် image က padding-box ကစပေါ်ပေမယ့် border သတ်မှတ်ပေးလိုက်ရင် background-image သည် repeat ဖြစ်နေတာကို crop လုပ်ထားတဲ့အပိုင်းလေးကိုကြည့်ရင်သိနိုင်ပါတယ်

border:5px solid transprent;
background:linear-gradient(
      90deg,
      rgba(131, 58, 180, 1) 0%,
      rgba(202, 106, 106, 1) 50%,
      rgba(252, 176, 69, 1) 100%
    );

ဒီလိုထားပြီးစမ်းကြည့်ပါ border width များလေ repeat ဖြစ်နေတဲ့အပိုင်းလေးက ပိုမြင်ရလေပါ

ဒါကိုဖြေရှင်းလို့ရတဲ့နည်းတွေကတော့ အများကြီးပါ

• background-repeat:no-repeat;

• background-origin:border-box;

• background-clip:padding-box;

ပုံကတော့ button ကို focus, hover မှာ gradient နဲ့ပြဖို့လုပ်ထားတာဖြစ်ပါတယ် ပထမ button က မူလအခြေနေပါ ဒုတိယပုံကတော့ အပေါ်ကပြောပြခဲ့တဲ့ ပြဿနာပါ ကျန်တဲ့သုံးခုကတော့ ဖြေရှင်းနည်းတွေကို ယှဉ်ပြတာပါ background-origin:border-box; အဖြေက အခု button အတွက်တော့ အဆင်ပြေဆုံးဖြစ်တာကိုတွေ့ရပါမယ်

Multiple Backgrounds

background သည် layer အများကြီးသတ်မှတ်လို့ရပါတယ် အရှေ့ဆုံး parameter သည် user နဲ့အနီးဆုံး layer ဖြစ်ပါတယ် အနောက်ဆုံး layer မှာပဲ background-color သတ်မှတ်ပေးလို့ရပါတယ်

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

ဒီဟာကိုအသုံးတည့်တဲ့ဟာ တစ်ခုပြောပြပါမယ်၊ border-radius ထားပြီးတော့ border color ကို gradient နဲ့ပြချင်တဲ့ဟာမျိုးကြုံပါလိမ့်မယ်၊ပြဿနာက border-image နဲ့ border-radius နဲ့တွဲသုံးလို့မရပါဘူး။ ဖြေရှင်းလို့ရတဲ့နည်းတွေကတော့ အများကြီးပေါ့၊ ဒီ background-image ကိုသုံးပြီးဖြေရှင်းတာက အဲ့တာတွေထဲက တစ်ခုပဲပြောရမှာပေါ့။

 background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your background color*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box; /* this is border */

Background Shorthand

အတိုကောက်ကိုတော့ အောက်ကအတိုင်းအစဉ်လိုက်သုံးသွားရပါမယ် ဒီအတိုကောက်ထဲမှာ မထည့်လိုက်တဲ့ ကောင်တွေဆိုရင်တော့ သူတို့ရဲ့ initial value ကိုသုံးသွားပါတယ်

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

background-position နဲ့ background-size ကိုတော့ / နဲ့ အပေါ်မှာပြသလိုပဲသုံးလို့ရပါတယ် ဒါကိုတော့သတိထားပါ အလွတ်မှတ်စရာမလိုပါဘူး mdn မှာသွားကြည့်လို့ရပါတယ်