background-repeat ဂုဏ်သတ္တိ

background-repeat ဂုဏ်သတ္တိသည် အစိတ်အပိုင်းတစ်ခု၏ နောက်ခံပုံကို မည်သို့ထပ်ခါထပ်ခါဖော်ပြရမည်ကို သတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့် ပုံသည် X ဝင်ရိုးနှင့် Y ဝင်ရိုးနှစ်ခုစလုံးတွင် ထပ်ကျော့သည်၊ ထိုသို့ဖြင့် ရနိုင်သောနေရာတစ်ခုလုံးကို ဖုံးအုပ်ထားသည်။

ဝါကျဖွဲ့ပုံ

selector {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`no-repeat`	ပုံကို လုံးဝ ထပ်ခါထပ်ခါ မဖော်ပြပါ။
`repeat-x`	ပုံသည် X ဝင်ရိုးတလျှောက် ထပ်ခါထပ်ခါဖော်ပြမည်။
`repeat-y`	ပုံသည် Y ဝင်ရိုးတလျှောက် ထပ်ခါထပ်ခါဖော်ပြမည်။
`repeat`	ပုံသည် X ဝင်ရိုးနှင့် Y ဝင်ရိုးနှစ်ခုစလုံးတလျှောက် ထပ်ခါထပ်ခါဖော်ပြမည်။
`space`	ပုံသည် နေရာတစ်ခုလုံးကို အပြည့်အဝဖြည့်စွက်ရန် လုံလောက်သော အကြိမ်အရေအတွက်ထိ ထပ်ခါထပ်ခါဖော်ပြမည်၊ ၎င်းကို မအောင်မြင်ပါက ပုံများအကြားတွင် ဗလာနေရာများ ထည့်သွင်းပေးမည်။
`round`	ပုံသည် နေရာအတွင်းသို့ ပုံဖော်ပြမှုအရေအတွက် အပြည့်အဝ နေရာချနိုင်ရန် ထပ်ခါထပ်ခါဖော်ပြမည်၊ ၎င်းကို မအောင်မြင်ပါက နောက်ခံပုံများကို အရွယ်အစားညှိပေးမည်။

ပုံသေတန်ဖိုး: repeat - ဖန်သားပြင်တစ်ခုလုံးကို အဆင်တစ်ခုဖြင့် ဖုံးအုပ်ထားသည်။

နမူနာ

ပုံသေအားဖြင့် နောက်ခံပုံသည် ၎င်းကိုယ်တိုင် အစိတ်အပိုင်းတစ်ခုလုံးကို ဖုံးအုပ်ပေးမည်-

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

ပုံသည် ထပ်ခါထပ်ခါ မဖော်ပြရန် လုပ်ဆောင်ကြပါစို့-

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

ယခုတော့ ပုံသည် X ဝင်ရိုးတလျှောက် ထပ်ခါထပ်ခါဖော်ပြပါစေ-

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

ယခုတော့ Y ဝင်ရိုးတလျှောက်-

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

ဝင်ရိုးများတလျှောက် ထပ်ခါထပ်ခါဖော်ပြသော ပုံများကို background-position ဂုဏ်သတ္တိဖြင့် တည်နေရာသတ်မှတ်ပေးနိုင်သည်-

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

space တန်ဖိုး မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရှုကြပါစို့-

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

နမူနာ

round တန်ဖိုး မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရှုကြပါစို့-

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

ဤအရာကိုလည်း ကြည့်ပါ

background ဂုဏ်သတ္တိ,
နောက်ခံအတွက် အတိုကောက်ဂုဏ်သတ္တိအဖြစ် ကိုယ်စားပြုသည်