background-repeat කොටස

background-repeat කොටස අංගයක පසුබිම් පින්තූරය නැවත නැවතත් කරන ආකාරය නිර්වචනය කරයි. පෙරනිමියෙන් පින්තූරය X අක්ෂය දිගේත්, Y අක්ෂය දිගේත් නැවත නැවතත් වේ, එමගින් ප්‍රවේශය විය හැකි සම්පූර්ණ ප්‍රදේශය ආවරණය කරයි.

වාක්‍ය රචනා ක්‍රමය

cssතෝරන්නා {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

මූල්‍යයන්

පෙරනිමි මූල්‍යය: repeat - තිරය මුළුමනින්ම වර්ණරේඛනයකින් ආවරණය කරයි.

උදාහරණය

පෙරනිමියෙන් පසුබිම් පින්තූරය එම අංගය මුළුමනින්ම ආවරණය කරයි:

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

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

Результат:

උදාහරණය

පින්තූරය නැවත නැවතත් නොවන පරිදි එය සකසමු:

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

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

Результат:

උදාහරණය

දැන් පින්තූරය X අක්ෂය දිගේ නැවත නැවතත් වීමට ඉඩ දෙමු:

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

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

Результат:

උදාහරණය

දැන් Y අක්ෂය දිගේ:

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

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

Результат:

උදාහරණය

අක්ෂ දිගේ නැවත නැවතත් වන පින්තූර background-position කොටස භාවිතයෙන් ස්ථානගත කළ හැකිය:

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

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

Результат:

උදාහරණය

space මූල්‍යය ක්‍රියා කරන ආකාරය බලමු:

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

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

Результат:

උදාහරණය

round මූල්‍යය ක්‍රියා කරන ආකාරය බලමු:

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

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

Результат:

මෙයද බලන්න