Multiple Backgrounds، Position، Size، Repeat، Attachment

کنترل کامل تصویر پس‌زمینه: Position، Size، Repeat و Attachment

در درس قبل با background-color و background-image آشنا شدیم و به‌طور مختصر گفتیم که چند تصویر می‌تونن هم‌زمان به‌کار برن. حالا وقتشه دقیق ببینیم چطور می‌شه موقعیت، اندازه، رفتار تکرار و نحوه چسبیدن هر تصویر پس‌زمینه رو، به‌طور کامل و مستقل، کنترل کرد.

background-position: موقعیت تصویر

.box {
  background-image: url("icon.svg");
  background-position: center;
}

Property به اسم background-position مشخص می‌کنه تصویر پس‌زمینه، از کجای عنصر شروع بشه.

مقادیر کلیدواژه‌ای

.top-left {
  background-position: top left;
}

.center {
  background-position: center;
}

.bottom-right {
  background-position: bottom right;
}

کلیدواژه‌های top، bottom، left، right و center می‌تونن با هم ترکیب بشن تا موقعیت دقیق مشخص بشه. اگه فقط یک کلیدواژه بدیم (مثل center)، به‌طور خودکار برای هر دو محور (افقی و عمودی) اعمال می‌شه.

مقادیر عددی و درصدی

.box {
  background-position: 20px 50px;
}

.box-percent {
  background-position: 25% 75%;
}

وقتی دو مقدار عددی یا درصدی بدیم، مقدار اول محور افقی و مقدار دوم محور عمودی رو مشخص می‌کنه. مقدار درصدی، هم نسبت به اندازه عنصر و هم نسبت به اندازه خود تصویر محاسبه می‌شه؛ یعنی 50% 50% دقیقاً معادل center است.

background-size: اندازه تصویر

.box {
  background-image: url("photo.jpg");
  background-size: 200px 150px;
}

Property به اسم background-size اندازه نمایشی تصویر پس‌زمینه رو کنترل می‌کنه؛ مستقل از اندازه واقعی فایل تصویر.

دو مقدار کلیدواژه‌ای بسیار پرکاربرد

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

مقدار	رفتار
cover	تصویر بزرگ‌ می‌شود تا کل فضای عنصر را بپوشاند؛ ممکن است بخشی از تصویر بریده شود
contain	تصویر تا حداکثر اندازه ممکن بزرگ می‌شود، بدون اینکه از فضای عنصر بیرون بزند؛ ممکن است فضای خالی باقی بماند

در هر دو حالت، نسبت ابعاد اصلی تصویر (Aspect Ratio) همیشه حفظ می‌شه؛ تفاوت اصلی اینه که cover اولویت رو به پر کردن کامل فضا می‌ده (حتی به قیمت بریده شدن بخشی از تصویر)، در حالی که contain اولویت رو به نمایش کامل تصویر می‌ده (حتی به قیمت باقی موندن فضای خالی اطرافش).

background-repeat: رفتار تکرار

.no-repeat {
  background-repeat: no-repeat;
}

.repeat-x {
  background-repeat: repeat-x;
}

.repeat-y {
  background-repeat: repeat-y;
}

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

مقدار	رفتار
repeat	تکرار هم‌زمان در هر دو جهت افقی و عمودی (پیش‌فرض)
no-repeat	بدون هیچ تکراری؛ فقط یک نسخه از تصویر نمایش داده می‌شود
repeat-x	تکرار فقط در جهت افقی
repeat-y	تکرار فقط در جهت عمودی
space	تکرار می‌شود، ولی با فاصله مساوی بین نسخه‌ها تا از بریده شدن تصویر جلوگیری شود
round	تکرار می‌شود، با تغییر اندازه خودکار تصویر تا دقیقاً به تعداد کامل در فضا جا شود

background-attachment: رفتار در برابر اسکرول

.fixed-bg {
  background-image: url("texture.jpg");
  background-attachment: fixed;
}

Property به اسم background-attachment مشخص می‌کنه آیا تصویر پس‌زمینه، هنگام اسکرول کردن صفحه، همراه با محتوا حرکت کنه یا در جای خودش ثابت بمونه.

مقدار	رفتار
scroll	تصویر همراه با محتوای صفحه اسکرول می‌شود (پیش‌فرض)
fixed	تصویر نسبت به Viewport ثابت می‌ماند و هنگام اسکرول، حرکت نمی‌کند
local	تصویر نسبت به محتوای داخلی خود عنصر (در صورت داشتن اسکرول داخلی) حرکت می‌کند

مقدار fixed، جلوه معروفی به اسم Parallax ایجاد می‌کنه؛ یعنی وقتی کاربر صفحه رو اسکرول می‌کنه، محتوا حرکت می‌کنه ولی تصویر پس‌زمینه ثابت می‌مونه، که باعث یک احساس عمق بصری می‌شه.

یک مثال کامل با تمام Propertyها

.hero {
  background-image: url("mountains.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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

چند تصویر پس‌زمینه، هرکدام با تنظیمات مستقل

.layered-box {
  background-image: url("pattern.png"), url("photo.jpg");
  background-position: top left, center;
  background-size: 50px, cover;
  background-repeat: repeat, no-repeat;
}

وقتی چند تصویر هم‌زمان با کاما تعریف بشن (همون‌طور که در درس قبل دیدیم)، بقیه Propertyهای مرتبط با پس‌زمینه هم می‌تونن به همون تعداد و به همون ترتیب، با کاما از هم جدا بشن. در این مثال، تصویر اول (pattern.png) از بالا-چپ شروع می‌شه، اندازه ۵۰ پیکسل داره و تکرار می‌شه؛ تصویر دوم (photo.jpg) از وسط شروع می‌شه، کل فضا رو می‌پوشونه و تکرار نمی‌شه.

نکات مهم

• background-position موقعیت شروع تصویر، background-size اندازه نمایشی آن، background-repeat رفتار تکرار، و background-attachment رفتار آن نسبت به اسکرول را کنترل می‌کند.
• مقادیر cover و contain برای background-size، همیشه نسبت ابعاد اصلی تصویر را حفظ می‌کنند.
• وقتی چند تصویر پس‌زمینه هم‌زمان تعریف شود، بقیه Propertyهای مرتبط هم می‌توانند به همان تعداد و ترتیب، با کاما جدا شوند.

اشتباهات رایج

• قاطی کردن cover و contain؛ اولی ممکن است تصویر را ببرد، دومی ممکن است فضای خالی باقی بگذارد.
• استفاده از background-attachment: fixed بدون توجه به مشکلات احتمالی Performance، مخصوصاً روی دستگاه‌های موبایل که این ویژگی گاهی پشتیبانی محدودتری دارد.
• فراموش کردن background-repeat: no-repeat هنگام استفاده از یک تصویر تکی و بزرگ، که باعث تکرار ناخواسته آن می‌شود.

جمع‌بندی

background-position موقعیت، background-size اندازه، background-repeat رفتار تکرار، و background-attachment رفتار تصویر پس‌زمینه نسبت به اسکرول صفحه را کنترل می‌کنند. ترکیب این چهار Property، امکان طراحی دقیق و متنوع پس‌زمینه‌ها را فراهم می‌کند و وقتی چند تصویر هم‌زمان استفاده شود، هرکدام از این Propertyها می‌توانند به‌طور مستقل برای هر لایه تنظیم شوند.