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;
}

Результат:

Տես նաև