cascading style sheet မိတ္ဆက္(၄)

Background Properties

Background Color
    HTML တြင္ background color ကို body elements တြင္ bgcolor attributes ကိုသံုး ၿပီးေရးရပါတယ္။ တျခား elements မ်ားတြင္သံုးခ်င္ရင္ေတာ့ table elements တြင္ bgcolor attributes ကိုအသံုးျပဳရပါမယ္။ CSS ကိုအသံုးျပဳရင္ေတာ့ body elements တြင္ သာမက HTML elements အားလံုးတြင္ background color ကိုထည့္ႏိုင္ပါတယ္။
Values: background-color: <color> | transparent | inherit
    Inherited: No
    Works with: All elements
ဥပမာ…
        <p style=”padding:5px; background-color:#ccc;”>the background color is gray </p>
Background color ကိုေတာ့ ေျပာင္းလဲၿပီး စမ္းၾကည့္ေစခ်င္ပါတယ္။ Browser ရဲ့ default ကေတာ့ transparent ပါ။

Background Images
    Background image ကိုအသံုးျပဳမယ္ဆိုရင္ေတာ့ သတိထားရမွာက စာသားေတြႏွင့္ အေႏွာက္အယွက္ ေပးမယ့္ အေရာင္႐ွိေသာ background image ကိုေ႐ွာင္ရပါမယ္။
    Background image ၏ အရြယ္အစား (file size) ကိုေသးႏိုင္သမွ် ေသးရမွာေတာ့ အေရးႀကီးပါတယ္။
    Background image ၏အေျခခံအေရာင္ႏွင့္ ကိုက္ညီေသာ background color ကိုအသံုးျပဳရပါမယ္။ အကယ္၍ internet connection ေၾကာင့္ background image အေပၚႏိုင္ ရင္ေတာင္မွ background color ႏွင့္ web pages ၏ design ကအဆင္ေျပမယ့္ အေရာင္ကို သံုးရပါမယ္။
Values: background-images: <url> | none | inherit
    Inherited: No
    Works with: All elements
ဥပမာ…
Body {background-image: url(bodybg.gif);}
P {background-image: url(dots.gif);}

Background Tiling (Repeat)

    Background repeat ကေတာ့ background image ကို repeat ျဖစ္ျခင္းမွကာကြယ္ရန္ႏွင့္ repeat ျဖစ္ေစရန္ ၊ direction တစ္ခုတည္း repeat ျဖစ္ေစလိုတဲ့အခါမွာ သံုးပါတယ္။
Values: background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
    Inherited: No
    Works with: All elements 
ဥပမာ…
        div.ringo { background-image:url(star.gif);
background-repeat:no-repeat;}
        div.horz { background-image:url(star.gif);
background-repeat: repeat-x;}
        div.vert { background-image:url(star.gif);
background-repeat: repeat-y;}

background repeat

Background position
    HTML Elements တစ္ခု၏ background image ကိုေနရာသတ္မွတ္ ရန္တြင္အသံုး ျပဳပါတယ္။ background image ၏ေနရာကို (x,y) ဝင္႐ိုးတြင္ အတိအက် သတ္မွတ္ႏိုင္ပါတယ္။
Values: background-position: [<percentage> | <length>] | [top | center | bottom] ||     [left | center | right] |        inherit
Inherited: No
Works with: All elements
ဥပမာ…
        Body {background-image: url(bigstar.gif);
background-position: top center;
background-repeat: no-repeat;}

background position

 Position ကို left center, right center, center bottom ,center စသည္ျဖင့္ အစားထိုးၿပီး စမ္းၾကည့္ေစခ်င္ပါသည္။ background image ေနရာေျပာင္းသြားတာကို ဂ႐ုျပဳေလ့လာေစခ်င္ပါ တယ္။
ေနာက္တစ္ခုက background image ကို pixel အတိအက်ေနရာ သတ္မွတ္ေပတာပါ။ (150px 15px) ဆိုရင္ 150px က (x) ဝင္႐ိုးေနရာပါ။  15px ကေတာ့ (y) ဝင္႐ိုးေနရာပါ။
ဥပမာ…
Body {background-image: url(bigstar.gif);
background-position: 150px 15px;
background-repeat: no-repeat;}

Background attachment
    Default အေနႏွင့္ browser တြင္ scroll ဆြဲလိုက္တာႏွင့္ background image ကdocument ေတြႏွင့္အတူတူ scroll ႏွင့္တြဲပါသြားပါလိမ့္မယ္။ body element တြင္ထည့္ထားတဲ့ background image ဆိုရင္ေပါ့။ တခါတရံမွာ background image ကိုစာသား document ေတြႏွင့္ scroll မျဖစ္ေစခ်င္ရင္ေတာ့ fixed လုပ္လိုက္ရင္ စာသားေတြသာ scroll ျဖစ္သြားၿပီး background image ကေတာ့က်န္ေနမွာပါ။
Values: background-attachment: scroll | fixed | inherit
    Inherited: No
    Works with: All elements
ဥပမာ…
Body {background-image: url(bigstar.gif);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;}

fixed background

scroll background

Combination background properties
    Background properties ေတြကို အ႐ွည္မေရးခ်င္ဘူး ဆိုရင္ေတာ့ အတုိခ်ံဳ႕ၿပီး (background:) ဆိုေသာ property ႏွင့္ေရးႏိုင္ပါတယ္။
Values: background: [<background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>] | inherit
Inherited: No
Works with: All elements
ဥပမာ…
 Body {background:#336600 url(bigstar.gif)fixed top center no-repeat;}