CSS Backgrounds

css background properties များကို Element တွေအတွက်နောက်ခံ effect တွေထည့်ဖို့သုံးတယ်။

In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

Background-color property က element တစ်ခုရဲ့နောက်ခံအရောင်ကိုသတ်မှတ်ပါတယ်။

Example

The background color of a page is set like this:

1. body{
2.     background-color: lightblue;
3. }

Try it Yourself »

Other Element

HTML element တွေအတွက်နောက်ခံအရောင်ကိုသတ်မှတ်နိုင်ပါတယ်။

Example

ဒီမှာ < h1 >, <p >နှင့် <div> element တွေမှာနောက်ခံအရောင်တွေကွဲပြားပါလိမ့်မယ်။

1. h1{
2.     background-color: greens;
3. }
4. div{
5.     background-color: lightblue;
6. }
7. p{
8.     background-color:yellow;
9. }

Try it Yourself »

Opacity / Transparency

opacity property က element တစ်ခုရဲ့ opacity / transparent ကိုသတ်မှတ်ပါတယ်။ ၀.၀ မှ ၁.၀ အတွင်းတန်ဖိုးတစ်ခုယူနိုင်သည်

opacity 1

opacity 0.7

opacity 0.4

opacity 0.2

Example

1. div{
2.     background-color: green;
3.    opacity: 0.3;
4. }

Try it Yourself »

မှတ်ချက်။ ။ Opacity property ကို element ရဲ့နောက်ခံမှာပွင့်လင်းမြင်သာမှုရှိစေရန်အသုံးပြုတဲ့အခါသူ့ရဲ့ element အားလုံးဟာတူညီတဲ့ပွင့်လင်းမြင်သာမှုကိုအမွေခံရသည်။ ၎င်းသည်ပွင့်လင်းမြင်သာသော element တစ်ခုအတွင်းရှိစာသားကိုဖတ်ရန်ခက်ခဲစေသည်။

Transparency using RGBA

သင်သည် element တွေကို opacity လျှောက်ထားချင်လျှင်, RGBA အရောင်တန်ဖိုးများကိုသုံးပါ။ အောက်ပါဥပမာသည်စာသားမဟုတ်ဘဲနောက်ခံအရောင်အတွက် opacity ကိုသတ်မှတ်သည်။

100% opacity

60% opacity

30% opacity

20% opacity

ကျွန်တော်တို့ရဲ့အရောင်တန်ဖိုးအနေနဲ့ RGB ကိုသုံးနိုင်သည်ကိုကျွန်ုပ်တို့၏ CSS အရောင်များအခန်းမှသင်လေ့လာသိရှိခဲ့ရသည်။ RGB အပြင်အရောင်တစ်ခုအတွက် opacity ကိုသတ်မှတ်ထားတဲ့ alpha channel (RGBA) နဲ့ RGB အရောင်တန်ဖိုးကိုသင်အသုံးပြုနိုင်တယ်။

RGBA အရောင်တန်ဖိုးကို rgba (အနီရောင်၊ အစိမ်း၊ အပြာ၊ alpha) နဲ့သတ်မှတ်ပါတယ်။ alpha parameter သည် ၀.၀ (အပြည့်အဝပွင့်လင်းမြင်သာမှု) နှင့် ၁.၀ (လုံးဝ opaque) အကြားကိန်းတစ်ခုဖြစ်သည်။

Example

The background color of a page is set like this:

1. body{
2.     background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
3. }

Try it Yourself »

CSS Multiple Backgrounds

ဒီအခန်းမှာနောက်ခံပုံများစွာကို element တစ်ခုထဲထည့်ဖို့ဘယ်လိုလေ့လာရမလဲဆိုတာကိုလေ့လာပါလိမ့်မယ်။

• backgroun-size
• backgroun-origin
• background-clip

CSS Multiple Backgrounds

CSS သည် Background-image property မှတဆင့် element တစ်ခုအတွက်နောက်ခံပုံများစွာကိုသင်ခွင့်ပြုသည်။

မတူညီသောနောက်ခံပုံများကိုကော်မာများဖြင့်ခွဲခြားထားသည်။

မတူညီသောနောက်ခံပုံများကိုကော်မာများဖြင့်ခွဲခြားထားပြီးပထမပုံရိပ်သည်ကြည့်ရှုသူနှင့်အနီးဆုံးရှိသည့်တစ်ခုချင်းစီအပေါ်တွင်ပုံဖော်ထားသည်။

Example

1. #example1{
2.      background-image : url(img_flwr.gif) , url(paper.gif);
3.      background-position : right bottom, left top;
4.      background-repeat : no-repeat, repeat;
5. }

Try it Yourself »

အောက်ဖော်ပြပါဥပမာသည် Background shorthand property ကိုသုံးသည်။

Example

1. #example1{
2.      background : url(img_flwr.gif) right bottom no-repeat , url(paper.gif) left top repeat ;
3. }

Try it Yourself »

CSS Background Size

CSS background-size property ကနောက်ခံပုံအရွယ်အစားကိုသတ်မှတ်နိုင်သည်။

အရွယ်အစားကိုအရှည်၊ ရာခိုင်နှုန်း၊ သို့မဟုတ် (contain or cover) နှစ်ခုကိုသုံးနိုင်သည်။

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

1. #div1{
2.      background-image : url(img_flwr.gif) ;
3.      background-size: 100px 80px;
4.      background-repeat : no-repeat, repeat;
5. }

Try it Yourself »

contain or cover တန်ဖိုးများ ကိုအသုံးပြုပုံ။

Example

1. #div1{
2.      background-image : url(img_flwr.gif) ;
3.      background-size: contain;
4.      background-repeat : no-repeat;
5. }
6. #div2{
7.      background-image : url(img_flwr.gif) ;
8.      background-size: cover;
9.      background-repeat : no-repeat;
10. }

Try it Yourself »

Background-size property ရဲ့ value များကို(ကော်မာခွဲထားပြီး) တန်ဖိုးများစွာကိုလက်ခံသည်။

အောက်ဖော်ပြပါဥပမာသည်ပုံတစ်ပုံချင်းစီအတွက်နောက်ခံအရွယ်အစားနှင့်ကွဲပြားသောနောက်ခံပုံ (၃) ခုရှိသည်။

Example

1. #example1{
2.      background : url(img_tree.gif) left top no-repeat , url(img_flwr.gif) right bottom no-repeat ,
3.      url(paper.gif) left top repeat;
4.      background-size : 50px , 130px , auto ;
5. }

Try it Yourself »

Full Size Background Image

ယခုတွင်ကျွန်ုပ်တို့သည် browser ၀ င်းဒိုးတစ်ခုလုံးကိုအချိန်မရွေးဖုံးကွယ်ထားသော website တစ်ခုတွင်နောက်ခံပုံရိပ်တစ်ခုထားလိုသည်။

လိုအပ်ချက်များမှာအောက်ပါအတိုင်းဖြစ်သည် -

• စာမျက်နှာတစ်ခုလုံးကိုပုံနှင့်ဖြည့်ပါ (အဖြူရောင်နေရာမရှိအောင်)
• လိုအပ်သည့်အတိုင်းပုံရိပ်ထည့်ပါ။
• စာမျက်နှာပေါ်တွင် Center ပုံရိပ်
• Scrollbars မဖြစ်ပေါ်စေပါနှင့်

အောက်ဖော်ပြပါဥပမာသည်မည်သို့ပြုလုပ်ရမည်ကိုပြသည်။ <html> element ကိုသုံးပါ (<html> element ကအမြဲတမ်း browser window ရဲ့အမြင့်ဖြစ်တယ်။ ) ထို့နောက်၎င်းကိုပုံသေဗဟိုပြုနောက်ခံထားပါ။ ထို့နောက်၎င်း၏အရွယ်အစားကို background-size property ဖြင့်ချိန်ညှိပါ။

Example

1. html{
2.     background : url(img_man.jpg) no-repeat center fixed ;
3.     background-size : cover ;
4. }

Try it Yourself »

Hero Image

You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.

Example

1. .hero-image{
2.     background : url(img_man.jpg) no-repeat center ;
3.     background-size : cover ;
4.     height: 500px ;
5.     position: relative ;
6. }

Try it Yourself »

CSS background-origin Property

နောက်ခံပုံတည်နေရာကို CSS background-origin property ကသတ်မှတ်ပါတယ်။

ဒီ property ကတန်ဖိုး ၃ မျိုးကိုယူတယ်။

• border-box - နောက်ခံပုံက border ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်
• padding-box - နောက်ခံပုံဟာ padding edge ရဲ့ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်
• content-box - နောက်ခံပုံဟာအကြောင်းအရာရဲ့ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်

အောက်ပါဥပမာသည်နောက်ခံမူလပိုင်ဆိုင်မှုကိုဖော်ပြသည်။

Example

1. #example1{
2.     border : 10px solid black ;
3.     padding : 35px ;
4.     background : url(img_flwr.gif);
5.     background-repeat: no-repeat ;
6.     background-origin : content-box ;
7. }

Try it Yourself »

CSS background-clip Property

နောက်ခံပုံတည်နေရာကို CSS background-origin property ကသတ်မှတ်ပါတယ်။

ဒီ property ကတန်ဖိုး ၃ မျိုးကိုယူတယ်။

• border-box - (default) နောက်ခံအား border ၏အပြင်ဘက်အစွန်းကစတယ်
• padding-box - နောက်ခံ padding ရဲ့အပြင်ဘက်အစွန်းကစတယ်
• content-box - နောက်ခံပုံကို content box ထဲကနေစတယ်

အောက်ပါဥပမာသည်နောက်ခံမူလပိုင်ဆိုင်မှုကိုဖော်ပြသည်။

Example

1. #example1{
2.     border : 10px solid black ;
3.     padding : 35px ;
4.     background : yellow ;
5.     background-origin : content-box ;
6. }

Try it Yourself »

CSS Advanced Background Properties

Property	Description
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)