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

background-size հատկությունը սահմանում է ֆոնի նկարի չափը: Հատկության արժեքը կարող է լինել ցանկացած չափման միավոր, կամ auto, cover, contain բանալի բառերը:

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

cssընտրիչ {
  background-size: արժեք;
}

Բանալի բառեր

Լռելյայն արժեքը՝ auto:

Օգտագործում

Չափման միավորները և auto-ն կարող են օգտագործվել տարբեր համակցություններով, օրինակ՝ auto 20px, 30% 20px, կամ auto 30% և այլն: Այս դեպքում առաջին պարամետրը սահմանում է ֆոնի չափը լայնությամբ, իսկ երկրորդ պարամետրը՝ ֆոնի չափը բարձրությամբ: Եթե նշված է մեկ պարամետր, ապա այն կսահմանի ֆոնի չափը և լայնությամբ, և բարձրությամբ միաժամանակ:

Օրինակ

Այժմ ֆոնի նկարը կունենա իր բնական չափը:

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

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

Результат:

Օրինակ

Այժմ ֆոնի նկարը կլինի 300px 400px չափի (մեր դեպքում նկարի համամասնությունները կխեղաթյուրվեն):

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

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

Результат:

Օրինակ

Այժմ ֆոնի նկարը կլինի 400px 400px չափի (մեր դեպքում նկարի համամասնությունները կխեղաթյուրվեն):

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

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

Результат:

Օրինակ

Այժմ ֆոնի նկարը կլինի 400px հորիզոնական, իսկ ուղղահայաց նրա չափը կհարմարվի այնպես, որ համամասնությունները չխեղաթյուրվեն:

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

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

Результат:

Օրինակ

Այժմ ֆոնի նկարը կլինի 400px ուղղահայաց, իսկ հորիզոնական նրա չափը կհարմարվի այնպես, որ համամասնությունները չխեղաթյուրվեն:

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

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

Результат:

Օրինակ . contain արժեքը

Տեսեք contain արժեքի աշխատանքը:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Օրինակ . cover արժեքը

Տեսեք cover արժեքի աշխատանքը:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Օրինակ . cover-ի աշխատանքի բարելավում

cover արժեքի աշխատանքը կարելի է բարելավել, եթե կենտրոնացնել նկարը օգտագործելով background-position հատկությունը (մեր դեպքում տեսանելի մասերում կհայտնվեն ձիերի գլուխները, և ոչ թե հետնամասերը):

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Տեսեք նաև