background-position հատկությունը

background-position հատկությունը սահմանում է տարրի ֆոնային պատկերի տեղադրությունը: Տեղադրությունը կարելի է սահմանել օգտագործելով ցանկացած չափման միավոր: Առաջին արժեքը նշանակում է ձախից բացատ, երկրորդը՝ վերևից բացատ:

Կարելի է նաև սահմանել դիրքը բանալի բառերով: Այս դեպքում արժեքների հերթականությունը կարևոր չէ: Ուղղահայացության համար բանալի բառերն են՝ top, center, bottom: Հորիզոնականի համար բանալի բառերն են՝ left, center, right:

Ինչպես օգտագործել բանալի բառերը

Պատկերը բանալի բառով տեղադրելու համար անհրաժեշտ է նշել մեկ արժեք ուղղահայացության և մեկը՝ հորիզոնականի համար: Օրինակ, եթե նշենք top right արժեքը, ապա պատկերը կտեղադրվի վերևի աջ մասում:

Բառերի հերթականությունը կարևոր չէ՝ կարելի է գրել top right, կամ՝ right top: Եթե կա center բանալի բառը - այն կարելի է բաց թողնել: Օրինակ, top center-ը նույնն է, ինչ պարզապես top-ը: Իսկ center center-ը նույնն է, ինչ պարզապես center-ը:

Շարահյուսություն

cssընտրիչ {
  background-position: երկու արժեք բացատով;
}

Օրինակ

Լռելյայնորեն ֆոնային պատկերը կլինի վերևի ձախ անկյունում:

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

css#elem {
  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: top right;
  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: bottom right;
  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: right 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: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 20px հեռավորության վրա ձախից և 40px վերևից:

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

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

Результат:

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 90% հեռավորության վրա ձախից և 100% վերևից:

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

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

Результат:

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա ձախից և ուղղահայացորեն ներքևից:

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

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

Результат:

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա ձախից և ուղղահայացորեն կենտրոնում:

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

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

Результат:

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա վերևից և հորիզոնականորեն կենտրոնում:

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

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

Результат:

Տես նաև