تکرار تصویر زمینه در CSS – ویژگی background-repeat

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

تعیین نحوه تکرار تصویر زمینه در CSS و استفاده از ویژگی background-repeat

برای تعیین نحوه تکرار تصویر زمینه می‌توانید مقدار ویژگی background-repeat را مشابه با مثال زیر مشخص کنید:

body {
  background-image: url("heart.png");
  background-repeat: repeat-x;
}

در مثال بالا با توجه به مقدار repeat-x برای این ویژگی، تصویر زمینه تنها در راستای افقی تکرار می‌شود. نتیجه قانون فوق روی سندی شامل یک هدینگ و پاراگراف فرضی مشابه با تصویر زیر است. فراموش نکنید به صورت پیشفرض تصویر زمینه از گوشه بالا سمت چپ المان رسم می‌شود:

به طور مشابه درج مقدار repeat-y برای ویژگی background-repeat باعث می‌شود تصویر زمینه صرفا در راستای عمودی تکرار شود. نتیجه این مقدار روی صفحه بالا مشابه با تصویر زیر خواهد بود:

مقدار repeat نیز باعث می‌شود تصویر زمینه در هر دو راستا تکرار شود.

در سمت مقابل، مقدار no-repeat به معنای عدم تکرار تصویر زمینه خواهد بود.

نکته: همانطور که در مثال‌های بالا مشاهده می‌کنید هنگام تکرار تصویر زمینه ممکن است تکرارهای انتهایی در هر راستا بسته به ابعاد المان به طور کامل در فضای آن، جا نشوند. در چنین حالتی این تکرارها بریده (یا نیمه کاره) رسم می‌شوند.

استفاده از دو مقدار برای ویژگی background-repeat

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

به عنوان مثال مقدار repeat no-repeat در قانون زیر باعث می‌شود تصویر زمینه در راستای افقی تکرار شود اما در راستای عمودی تکرار نشود. (این مقدار رفتاری معادل با مقدار repeat-x برای این ویژگی ایفا می‌کند). توجه داشته باشید در این مثال، مقدار repeat صرفا باعث تکرار تصویر زمینه در راستای افقی می‌شود (درحالیکه این مقدار به صورت تنها باعث تکرار تصویر زمینه در هر دو راستا می‌شود).

body {
  background-image: url("heart.png");
  background-repeat: repeat no-repeat;
}

جزئیات مقادیر متداول برای ویژگی background-repeat

در سی‌اس‌اس از مقادیر متداول زیر برای ویژگی background-repeat استفاده می‌شود:

• repeat: این مقدار باعث می‌شود تصویر زمینه در هر دو راستای افقی و عمودی تکرار شود. این مقدار، مقدار پیشفرض برای ویژگی background-repeat است.
• repeat-x: این مقدار باعث می‌شود تصویر زمینه صرفا در راستای افقی تکرار شود.
• repeat-y: این مقدار باعث می‌شود تصویر زمینه صرفا در راستای عمودی تکرار شود.
• no-repeat: این مقدار باعث می‌شود تصویر زمینه تکرار نشود. در واقع تصویر موردنظر تنها یک مرتبه نمایان می‌شود.
• space: این مقدار باعث می‌شود تصویر زمینه بدون ایجاد تصویر نیمه کاره در هر دو راستای افقی و عمودی تکرار شود (مگر اینکه یک نسخه از تصویر هم در فضای المان جا نشود). در این حالت نسخه اول و آخر تصویر در هر راستا روی یکی از لبه‌های المان قرار می‌گیرند و تمام تکرارها به طور کامل قابل مشاهده خواهند بود. مابین تکرارهای تصویر هم به شکل مساوی با فضاهای خالی پر می‌شود.
• round: این مقدار هم مشابه با مقدار space تلاش می‌کند تصویر نیمه کاره ایجاد نشود. با این تفاوت که در صورت لزوم به جای ایجاد فاصله خالی، فضای المان را با کشیدن یا له کردن تکرارهای تصویر پر می‌کند.

در ساختار دو مقداری برای ویژگی background-repeat از مقادیر repeat-x و repeat-y استفاده نمی‌شود. فراموش نکنید در این حالت استفاده از سایر مقادیر بسته به اینکه به عنوان مقدار اول یا دوم درج شود صرفا برای راستای موردنظر اعمال می‌شود.

چند نکته در مورد تکرار تصویر زمینه

نکته 1: تکرار تصویر زمینه در برخی حالات ممکن است نتیجه نامناسبی به همراه داشته باشد. برای مثال در نمونه زیر تکرار تصویر اصلی در راستاهای افقی و عمودی نتیجه نامناسبی را تولید می‌کند که در تصویر اول سمت راست مشاهده می‌کنید. در چنین شرایطی تغییر نحوه تکرار (مشابه با تصویر پایین آن) ممکن است نتیجه بهتری تولید کند.

نکته 2: به صورت پیشفرض تصویر زمینه از گوشه بالا سمت چپ المان رسم می‌شود. با کمک ویژگی background-position می‌توانید موقعیت شروع تصویر زمینه را تغییر دهید.

بیشتر بخوانید: تصویر زمینه در CSS – ویژگی background-image

بازگشت به فهرست مجموعه آموزشی CSS