background-position-y ගුණාංගය

background-position-y ගුණාංගය මගින් අංගයක පසුබිම් රූපයේ සිරස් අතට පිහිටීම අර්ථ දක්වයි.

ගුණාංගයට පහත අගයන් ලබා දිය හැකිය: top, center, bottom, එසේම පසුබිමේ ස්ථානය ප්‍රතිශත හෝ පික්සල් වලින් දක්වා දිය හැකිය.

වාක්‍ය රචනය

cssතෝරන්නා {
  background-position-y: අගය;
}

උදාහරණය

පසුබිම් රූපය සිරස් අතට ඉහළට ස්ථානගත කරමු:

html<div id="elem"></div>
css#elem {
  background-position-y: top;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

උදාහරණය

දැන් පසුබිම මධ්‍යයට ගෙන යමු:

html<div id="elem"></div>
css#elem {
  background-position-y: center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

උදාහරණය

දැන් පසුබිම සඳහා ස්ථානය ප්‍රතිශත වලින් දක්වමු:

html<div id="elem"></div>
css#elem {
  background-position-y: 80%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

මෙයද බලන්න

  • background ගුණාංගය,
    පසුබිම සඳහා කෙටි ගුණාංගයක් ලෙස ක්‍රියා කරයි
  • background-position-x ගුණාංගය,
    පසුබිමේ තිරස් ස්ථානය අර්ථ දක්වයි