چگونه تصویر پس‌زمینه را فقط در یک جهت تکرار کنم؟

در طراحی وب، گاهی نیاز داریم تصویر پس‌زمینه فقط در یک جهت (افقی یا عمودی) تکرار شود تا ظاهری منظم و حرفه‌ای ایجاد کند. این تکنیک برای ایجاد الگوهای خاص یا جلوگیری از کشیدگی نامناسب تصاویر مفید است.

CSS این امکان را با ویژگی background-repeat فراهم می‌کند. این ویژگی کنترل می‌کند که تصویر پس‌زمینه چگونه در محفظه عنصر تکرار شود. مقادیر پیش‌فرض آن شامل repeat (تکرار در هر دو جهت)، no-repeat (عدم تکرار) و مقادیر تک‌جهتی است.

کاربردهای عملی

تکرار یک‌جهتی تصاویر پس‌زمینه در این موارد کاربرد دارد:

ایجاد نوارهای افقی یا عمودی تزئینی
طراحی پس‌زمینه‌های خط‌دار برای بخش‌های خاص صفحه
ساخت گرادیان‌های سفارشی در یک جهت
بهینه‌سازی نمایش تصاویر الگو با ابعاد نامنظم

نمونه کدهای مرتبط

در این بخش سه مثال کاربردی را بررسی می‌کنیم:

مثال ۱: تکرار افقی

.horizontal-repeat {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
  height: 200px;
}

مثال ۲: تکرار عمودی

.vertical-repeat {
  background-image: url('stripes.png');
  background-repeat: repeat-y;
  width: 100px;
}

مثال ۳: ترکیب با موقعیت‌دهی

.positioned-repeat {
  background-image: url('border.png');
  background-repeat: repeat-y;
  background-position: right center;
  padding-right: 20px;
}

خلاصه درس

برای عملکرد صحیح، ابعاد عنصر باید در جهت تکرار مشخص باشد
تصاویر کوچک برای تکرار یک‌جهتی مناسب‌ترند
می‌توانید از background-size برای کنترل اندازه تصویر تکرارشونده استفاده کنید
در حالت repeat-x ارتفاع و در repeat-y عرض عنصر باید تعریف شود
این تکنیک با تصاویر SVG نیز به خوبی کار می‌کند

با استفاده صحیح از این ویژگی‌ها می‌توانید طرح‌های پیچیده و جذابی ایجاد کنید که هم سبک هستند و هم بارگذاری سریعی دارند. تمرین عملی با تصاویر مختلف به درک بهتر این قابلیت کمک می‌کند.

توسعه دهندگان

نیما جاهد