ویژگی background-repeat در CSS

background-repeat Property

ویژگی background-repeat در CSS مشخص می کند که تصاویر پس زمینه چگونه تکرار شوند. تصویر پس زمینه می تواند در محور افقی، عمودی با هر دو تکرار شود.

بصورت پیشفرض، تصاویر تکرار شده در عنصر مورد نظر محصور می شوند، اما آنها می توانند با استفاده از مقادیر دیگر به ترتیب دیگری نمایش پیدا کنند.

نحوه نوشتار

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

مقادیر

repeat-x​

تصویر در راستای محور افقی تکرار می شود.

repeat-y​

تصویر در راستای محور عمودی تکرار می شود.

repeat​

تصویر در راستای  هر دو محور عمودی و افقی تکرار می شود.

no-repeat​

تصویر پس زمینه تکرار نمی شود. تصویر لزوما تمام سطح عنصر را در بر نمی گیرد و مکان آن با ویژگی background-position مشخص می شود.

space​

تصویر بدون برش تکرار می شود. با در نظر گرفتن تصاویر اول و آخر، تا جایی که فضای کافی برای قرار دادن عکس وجود داشته باشد، عکسها قرار می گیرند و در صورت نبود فضای کافی، فواصل خالی بصورت مساوی بین تصاویر موجود تقسیم می شوند.

round​​

تصویر پس زمینه تکرار می شود و برای پر کردن فضای بین تصاویر، کشیده یا جمع می شود. فضای خالی بین تصاویر وجود ندارد.

html

<div class="wrapper">
    <p>background-repeat: <span>no-repeat;</span></p>
    <div class="box1"></div>
</div>
<div class="wrapper">
    <p>background-repeat: <span>repeat-x;</span></p>
    <div class="box2"></div>
</div>
<div class="wrapper">
    <p>background-repeat: <span>repeat-y;</span></p>
    <div class="box3"></div>
</div>
<div class="wrapper">
    <p>background-repeat: <span>space;</span></p>
    <div class="box4"></div>
</div>
<div class="wrapper">
    <p>background-repeat: <span>round;</span></p>
    <div class="box5"></div>
</div>
<div class="wrapper">
    <p>background-repeat: <span>space round;</span></p>
    <div class="box6"></div>
</div>

css

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-family: monospace;
}
.wrapper { margin-top: 20px; }
.wrapper div {
    width: 235px;
    height: 120px;
    border: 1px solid #777777;
    background-image: url(http://my-project.ir/img/circle.png);
}
.box1 {
    background-repeat: no-repeat; 
}
.box2 {
    background-repeat: repeat-x; 
}
.box3 {
    background-repeat: repeat-y; 
}
.box4 {
    background-repeat: space; 
}
.box5 {
    background-repeat: round; 
}
.box6 {
    background-repeat: space round; 
}
span { color: red; }

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.