CSS – تکرار پس‌زمینه (Background Repeat)

CSS - تکرار تصویر پس‌زمینه (Background Image Repeat)

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

تکرار تصویر به صورت پیش‌فرض

در مثال زیر، تصویر هم به صورت افقی و هم عمودی تکرار می‌شود که ممکن است ظاهر نامناسبی داشته باشد:

مثال:

body {
  background-image: url("gradient_bg.png");
}

تکرار تصویر فقط به صورت افقی

اگر تصویر تنها به صورت افقی تکرار شود، نتیجه بهتری خواهد داشت:

مثال:

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

نکته: برای تکرار تصویر به صورت عمودی، از دستور background-repeat: repeat-y; استفاده کنید.

عدم تکرار تصویر پس‌زمینه (no-repeat)

می‌توانید با استفاده از background-repeat: no-repeat، تصویر پس‌زمینه را تنها یک بار نمایش دهید.

مثال:

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

تنظیم موقعیت تصویر پس‌زمینه (background-position)

برای جلوگیری از هم‌پوشانی تصویر و متن، می‌توان موقعیت تصویر را با استفاده از خصوصیت background-position تغییر داد.

مثال:

تنظیم تصویر پس‌زمینه در گوشه بالا-راست صفحه:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

خصوصیات تکرار و موقعیت تصویر پس‌زمینه در CSS

خصوصیت توضیحات
background-position موقعیت شروع تصویر پس‌زمینه را مشخص می‌کند
background-repeat نحوه تکرار تصویر پس‌زمینه را تعیین می‌کند

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.