background-image ගුණය

background-image ගුණය අංගයකට පසුබිම් පින්තූරයක් සකසයි. පෙරනිමියෙන්, පින්තූරය එහි පිටපත් මගින් මුළු බ්ලොක් එකම පුරවනු ඇත, නමුත් මෙම හැසිරීම background-repeat ගුණය භාවිතයෙන් අවලංගු කළ හැකිය.

වාග් රීතිය

cssතේරුම් ගන්නා යන්ත්‍රය {
  background-image: url(පින්තූරයට මාර්ගය);
}

cssතේරුම් ගන්නා යන්ත්‍රය {
  background-image: none;
}

අගයන්

පෙරනිමි අගය: none.

උදාහරණය

background-image භාවිතයෙන් පසුබිම් පින්තූරය සකසමු, එහි පුනරාවර්තනය තහනම් කරමු background-repeat ගුණය භාවිතා කරමින්:

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

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

Результат:

උදාහරණය

background-repeat නොමැතිව පසුබිම් පින්තූරය මුළු බ්ලොක් එකම පුරවනු ඇත:

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

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

Результат:

උදාහරණය

එකවර පසුබිම් පින්තූරයක් සැකසිය හැකිය සහ background-color භාවිතයෙන් පසුබිම් වර්ණයක් සැකසිය හැකිය. මෙම අවස්ථාවේදී, පින්තූරය නොමැති තැන්වල පසුබිම - පසුබිම් වර්ණය වනු ඇත:

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

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

Результат:

මෙයද බලන්න