در CSS، زمانی که از تصاویر به عنوان پس‌زمینه استفاده می‌کنیم، می‌توانیم نحوه تکرار آن‌ها را کنترل کنیم. دو ویژگی مهم برای این کار `repeat-x` و `repeat-y` هستند. این دو ویژگی تعیین می‌کنند که تصویر پس‌زمینه به صورت افقی یا عمودی تکرار شود.
تفاوت اصلی بین این دو ویژگی در جهت تکرار تصویر است. `repeat-x` تصویر را فقط در جهت افقی (محور X) تکرار می‌کند، در حالی که `repeat-y` تصویر را فقط در جهت عمودی (محور Y) تکرار می‌نماید. این ویژگی‌ها زمانی مفید هستند که بخواهیم الگوهای خاصی را در پس‌زمینه ایجاد کنیم.
کاربردهای عملی
از repeat-x معمولاً برای ایجاد نوارهای افقی یا حاشیه‌های بالایی و پایینی استفاده می‌شود. برای مثال، می‌توانید یک تصویر نازک را به صورت افقی در سراسر صفحه تکرار کنید تا یک نوار رنگی ایجاد شود.
از طرف دیگر، repeat-y برای ایجاد نوارهای عمودی یا حاشیه‌های کناری مناسب است. این ویژگی زمانی کاربرد دارد که بخواهید یک الگوی عمودی در کنار صفحه یا بخشی از آن ایجاد کنید.
نمونه کدهای مرتبط
در ادامه سه مثال کاربردی از این ویژگی‌ها را مشاهده می‌کنید:
مثال ۱: استفاده از repeat-x
div {
background-image: url('pattern-horizontal.png');
background-repeat: repeat-x;
height: 100px;
}مثال ۲: استفاده از repeat-y
div {
background-image: url('pattern-vertical.png');
background-repeat: repeat-y;
width: 50px;
height: 500px;
}مثال ۳: ترکیب با سایر ویژگی‌ها
div {
background-image: url('gradient.png');
background-repeat: repeat-x;
background-position: bottom;
padding-bottom: 20px;
}خلاصه درس
repeat-x فقط تصویر را در جهت افقی تکرار می‌کند.
repeat-y فقط تصویر را در جهت عمودی تکرار می‌نماید.
برای عدم تکرار تصویر می‌توانید از no-repeat استفاده کنید.
مقدار پیش‌فرض برای تکرار تصویر repeat است که در هر دو جهت تصویر را تکرار می‌کند.
این ویژگی‌ها با تمام مرورگرهای مدرن سازگار هستند.
با استفاده صحیح از این ویژگی‌ها می‌توانید طرح‌های پس‌زمینه جذابی ایجاد کنید بدون اینکه نیاز به تصاویر بزرگ داشته باشید. این تکنیک هم در عملکرد صفحه تأثیر مثبت دارد و هم در حجم فایل‌ها صرفه‌جویی می‌کند.
