CSS background properties မ်ားကို element တစ္ခု၏ background effects မ်ားအတြက္သံုးပါတယ္။ Background effects မ်ားအတြက္ CSS properties မ်ားမွာ
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
background-color
background-color ကို Element ေတြရဲ့ background အေရာင္အတြက္ သံုးပါတယ္။Example:
<!DOCTYPE html><html>
<head>
<style>
body {background-color:#ffffff;}
h1{background-color:#888888;}
p{background-color:#eeffff;}
div{background-color:#b0c4dd;}
</style>
</head>
<body>
<h1>This is heading </h1>
<p> This is paragraph.</p>
<div>
This is a text inside a div element.
<p>This is paragraph between div tag </p>
This is also inside a div element.<br><br>
</div>
</body>
</html>
CSS မွာ color ကို HEX value, RGB value, color name တို.ျဖင့္ ေရးသားႏိုင္ပါတယ္။
HEX value syntax: #0000ff;
RGB value syntax: rgb(255,0,0)
Color name syntax: red
background-image
background-image ကို element ေတြရဲ့ background ပံု အတြက္သံုးပါတယ္။ CSS ရဲ့ background image default အရဆိုလ်င္ element ဆံုးတဲ့ အထိ ပံုကို repeat လုပ္သြားပါတယ္။ ေအာက္ က gradient ပံုနဲ. က်ေနာ္တို. Body ရဲ့ background ပံုအျဖစ္သံုးၾကည့္ပါမယ္။ |
| gradient.png |
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('gradient.png');}
</style>
</head>
<body>
<p>This is background-image repeated </p>
</body>
</html>
Browser မွာေအာက္ပါအတိုင္းျမင္ရပါတယ္။
background-repeat
က်ေနာ္တို. Background-image ကိုဒီတိုင္းအသံုးျပဳပါက CSS ရဲ့ default အရ repeat ျဖစ္သြားပါတယ္။ ဒါေၾကာင့္ repeat ကိုပဲ စိတ္ၾကိဳက္ျပင္လို.ရေအာင္ CSS က value 3 ခုကိုဖန္တီေပးထားပါတယ္။ ၄င္းတို.မွာ- repeat-x
- repeat-y
- no-repeat တို.ျဖစ္ပါတယ္။
Example of repeat-x:
<!DOCTYPE html><html>
<head>
<style>
body
{background-image:url('gradient.png'); background-repeat:repeat-x;}
</style>
</head>
<body>
<h1>Repeat Horizontally </h1>
</body>
</html>
Example of repeat-y:
<!DOCTYPE html><html>
<head>
<style>
body
{background-image:url('gradient.png'); background-repeat:repeat-y;}
</style>
</head>
<body>
<h1>Repeat Vertically </h1>
</body>
</html>
Example of no-repeat:
<!DOCTYPE html><html>
<head>
<style>
body
{background-image:url('gradient.png'); background-repeat:no-repeat;}
</style>
</head>
<body>
<h1>no-repeat </h1>
</body>
</html>
background-position
background-position ကို image ေနရာခ်တဲ့ အခါမွာသံုးပါတယ္။ ၄င္း၏ value မ်ားမွာTop left
top right
top center
center left
center
center right
bottom left
bottom right
bottom center တို.ျဖစ္ပါတယ္။
ေအာက္က စက္ဘီး ပံုႏွင့္ က်ေနာ္တို. position ၏ value ကိုေလ့လာၾကည့္ရေအာင္
 |
| bicycle.png |
Example:
<!DOCTYPE html><html>
<head>
<style>
body
{
background-image:url('bicycle.png');
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
ထို.ျပင္
- x% y% ႏွင့္
- xpos ypos တို.ျဖင့္လည္း ေနရာခ် ႏိုင္ပါတယ္။
x% y%
x% y% တြင္ ပထမ x% သည္ horizontal position ျဖစ္ျပီး y% သည္ vertical position ျဖစ္ပါတယ္။ default value သည္ 0% 0% ျဖစ္ပါတယ္။ top left corner ၏ value သည္ 0% 0% ျဖစ္ျပီး right bottom ၏တန္ဖိုးသည္ 100% 100% ျဖစ္ပါတယ္။
Example:
<!DOCTYPE html><html>
<head>
<style>
body
{
background-image:url('bicycle.png');
background-repeat:no-repeat;
background-position:20% 80%;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
xpos ypos
xpos ypos တြင္ xpos သည္ horizontal position ျဖစ္ျပီး ypos သည္ vertical position ျဖစ္ပါတယ္။ Unit ကို pixel (px) ျဖင့္သတ္မွတ္ပါတယ္။ top left corner ကို (0px 0px) ျဖင့္ ေရးရပါတယ္။Example:
<!DOCTYPE html><html>
<head>
<style>
body
{
background-image:url('bicycle.png');
background-repeat:no-repeat;
background-position:20px 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
background-attachment
background-attachment ၏ value မွာ fixed လို.ေရးၾကည့္ပါမယ္။ ၄င္က image ေတြကို position မေရြ.ေအာင္ လုပ္ေပးပါတယ္။ ေအာက္မွ example တြင္ <p> Try to scroll down the page.</p> ကို copy လုပ္ျပီး paste ေတာ္ေတာ္မ်ားမ်ားေလးလုပ္လုပ္လိုက္ပါ။ က်ေနာ္ကေတာ့ sample သံုးခုေလာက္ပဲ လုပ္ျပထားပါတယ္။ ၁၅ ေၾကာင္းေလာက္ျဖစ္ေအာင္ paste လုပ္လိုက္ပါ။ ျပီးလ်င္ browser ကို maximize လုပ္ျပီး vertical scroll bar နဲ. ေအာက္ကိုဆြဲခ်ၾကည့္ပါ။ ပံုက ေနရာမေရြ.ပဲ ရွိေနမွာပါ။<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('bicycle.png');
background-repeat:no-repeat;
background-position:top right;
background-attachment:fixed;
}
</style>
</head>
<body>
<p> Try to scroll down the page.</p>
<p> Try to scroll down the page.</p>
<p> Try to scroll down the page.</p>
</body>
</html>
Background - Shorthand property
က်ေနာ္တို. Styling Background နဲ.ပတ္သတ္ျပီး properties ေတြတစ္ေၾကာင္းစီေရးေနရပါတယ္။ ယခု background properties ကိုတစ္ခုတည္းေရးျပပါမယ္။ ဥပမာbody{
background-color:#ffffff;
background-image:url(‘bicycle.png’);
background-repeat:no-repeat;
}
အထက္ပါအတိုင္းေရးရမွာကို ေအာက္ပါကဲ့သို. တစ္ေၾကာင္းတည္း ေရးသားလို.ရပါတယ္။
body {background:#ffffff url(‘bicycle.png’) no-repeat;}
No comments:
Post a Comment