در CSS، می‌توان از ویژگی‌های متنوعی برای قرار دادن، تنظیم و استایل‌دهی به تصاویر پس‌زمینه (Background Images) استفاده کرد.

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

۱. قرار دادن تصویر پس‌زمینه با background-image

برای قرار دادن یک تصویر در پس‌زمینه یک عنصر، از background-image استفاده می‌کنیم.

.box {
    background-image: url("background.jpg");
    width: 500px;
    height: 300px;
}

🔹 نتیجه: تصویر "background.jpg" به‌عنوان پس‌زمینه عنصر .box قرار می‌گیرد.

۲. تعیین اندازه تصویر پس‌زمینه با background-size

ویژگی background-size برای کنترل اندازه تصویر پس‌زمینه استفاده می‌شود.

.box {
    background-image: url("background.jpg");
    background-size: cover;
}

🔹 مقادیر قابل استفاده:

🔹 مثال:

.box {
    background-image: url("background.jpg");
    background-size: contain;
}

✅ تصویر به‌صورت کامل داخل عنصر قرار می‌گیرد اما ممکن است بخش‌هایی از پس‌زمینه خالی بماند.

۳. موقعیت‌یابی تصویر پس‌زمینه با background-position

ویژگی background-position تعیین می‌کند که تصویر در کجای عنصر قرار بگیرد.

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

🔹 مقادیر قابل استفاده:

✅ برای تغییر محل دقیق تصویر، از مقادیر پیکسلی (px) یا درصدی (%) استفاده کنید.

۴. تکرار تصویر پس‌زمینه با background-repeat

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

.box {
    background-image: url("pattern.png");
    background-repeat: no-repeat;
}

🔹 مقادیر قابل استفاده:

✅ برای جلوگیری از تکرار تصویر، از no-repeat استفاده کنید.

۵. ثابت نگه داشتن تصویر پس‌زمینه با background-attachment

ویژگی background-attachment تعیین می‌کند که تصویر هنگام اسکرول صفحه حرکت کند یا ثابت بماند.

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

🔹 مقادیر قابل استفاده:

✅ مقدار fixed برای ایجاد جلوه پارالاکس (Parallax Effect) مناسب است.

۶. ترکیب همه ویژگی‌های پس‌زمینه با background (Shorthand)

می‌توان تمام ویژگی‌های مربوط به پس‌زمینه را در یک خط خلاصه کرد:

.box {
    background: url("background.jpg") no-repeat center center / cover fixed;
}

🔹 ترتیب مقادیر در background shorthand:

background: [color] [image] [repeat] [position] / [size] [attachment];

✅ مثال کامل:

.box {
    background: #f0f0f0 url("background.jpg") no-repeat right bottom / contain scroll;
}

۷. نمونه کاربردی: ایجاد پس‌زمینه پارالاکس

افکت پارالاکس (Parallax Effect) باعث می‌شود که تصویر پس‌زمینه هنگام اسکرول، ثابت بماند و جلوه‌ای زیبا ایجاد کند.

.parallax {
    background-image: url("parallax.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
}

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

۸. نتیجه‌گیری

✅ برای قرار دادن تصویر پس‌زمینه از background-image استفاده کنید.
✅ برای اندازه تصویر از background-size: cover | contain | px | % استفاده کنید.
✅ برای موقعیت تصویر از background-position: center | top | px استفاده کنید.
✅ برای تکرار یا عدم تکرار تصویر از background-repeat: no-repeat | repeat-x | repeat-y استفاده کنید.
✅ برای ثابت کردن تصویر پس‌زمینه هنگام اسکرول از background-attachment: fixed استفاده کنید.
✅ بهترین روش، استفاده از خلاصه‌نویسی background برای کدنویسی بهینه و خواناتر است.