در CSS، می‌توان ویژگی‌های مختلف مربوط به پس‌زمینه را به‌صورت خلاصه در یک خط تعریف کرد.

این روش که Shorthand Background Property نام دارد، باعث کاهش حجم کد، بهبود خوانایی و افزایش سرعت پردازش مرورگر می‌شود.

۱. ویژگی‌های پس‌زمینه در CSS

قبل از استفاده از خلاصه‌نویسی، باید با ویژگی‌های مختلف پس‌زمینه در CSS آشنا باشیم:

✅ با استفاده از خلاصه‌نویسی، می‌توان تمام این ویژگی‌ها را در یک خط تعریف کرد.

۲. نحوه خلاصه‌ نویسی ویژگی‌ های پس‌زمینه در CSS

✅ سینتکس کلی خلاصه‌نویسی background

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

🔹 ترتیب مقادیر:
1️⃣ رنگ پس‌زمینه (background-color)
2️⃣ تصویر پس‌زمینه (background-image)
3️⃣ تکرار تصویر (background-repeat)
4️⃣ موقعیت تصویر (background-position)
5️⃣ اندازه تصویر (background-size) (باید با / جدا شود)
6️⃣ رفتار تصویر هنگام اسکرول (background-attachment)
7️⃣ محدوده نمایش تصویر (background-clip) (اختیاری)

۳. مثال‌ های عملی خلاصه‌ نویسی background

✅ ۱. استفاده از رنگ پس‌زمینه

background: #f0f0f0;

🔹 نتیجه: فقط رنگ پس‌زمینه‌ی خاکستری روشن تنظیم می‌شود.

✅ ۲. استفاده از تصویر پس‌زمینه با رنگ

background: #ffcc00 url("bg.jpg");

🔹 نتیجه: تصویر bg.jpg روی رنگ زرد #ffcc00 قرار می‌گیرد.

✅ ۳. تنظیم عدم تکرار تصویر پس‌زمینه

background: url("bg.jpg") no-repeat;

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

✅ ۴. تعیین موقعیت تصویر پس‌زمینه

background: url("bg.jpg") no-repeat center center;

🔹 نتیجه: تصویر در مرکز عنصر قرار می‌گیرد و تکرار نمی‌شود.

✅ ۵. تعیین اندازه تصویر پس‌زمینه

background: url("bg.jpg") no-repeat center center / cover;

🔹 نتیجه:

• تصویر در مرکز عنصر قرار می‌گیرد.
• تصویر به‌صورت cover نمایش داده می‌شود (یعنی کل پس‌زمینه را بدون تغییر نسبت ابعاد پوشش می‌دهد).

✅ ۶. ثابت نگه داشتن تصویر هنگام اسکرول (fixed)

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

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

✅ ۷. استفاده از background-clip برای تعیین ناحیه‌ی نمایش پس‌زمینه

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

🔹 نتیجه:
✅ تصویر در کل پس‌زمینه نمایش داده می‌شود، اما محدود به حاشیه (border-box) عنصر خواهد بود.

۴. مقایسه کد استاندارد و کد خلاصه‌ شده

🔹 کد استاندارد بدون خلاصه‌نویسی:

.box {
    background-color: #ffcc00;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

🔹 کد خلاصه‌شده (Shorthand):

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

✅ مزیت: کاهش تعداد خطوط کد و بهبود خوانایی.

۵. تفاوت background و background-image

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

۶. نکات مهم هنگام استفاده از خلاصه‌ نویسی background

✅ ترتیب مقادیر مهم است! → اگر background-size را استفاده می‌کنید، حتماً آن را بعد از background-position و با / جدا کنید.

✅ مقدار پیش‌فرض مرورگر → اگر یک مقدار مشخص نشود، مرورگر مقدار پیش‌فرض آن را اعمال می‌کند. مثلاً اگر background-repeat را مشخص نکنید، مقدار آن repeat خواهد بود.

✅ ترکیب مناسب برای ریسپانسیو → مقدار background-size: cover برای طراحی‌های واکنش‌گرا پیشنهاد می‌شود.

✅ حذف پس‌زمینه → برای حذف کامل پس‌زمینه از background: none; استفاده کنید.

.box {
    background: none;
}

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

✅ خلاصه‌نویسی background باعث کاهش حجم کد، بهبود خوانایی و سرعت پردازش بیشتر می‌شود.
✅ با استفاده از background: [color] [image] [repeat] [position] / [size] [attachment]; می‌توان تمام ویژگی‌های پس‌زمینه را در یک خط تعریف کرد.
✅ استفاده از background-size: cover و background-attachment: fixed در طراحی‌های مدرن و ریسپانسیو بسیار کاربردی است.
✅ همیشه ترتیب مقادیر را رعایت کنید تا مرورگر بتواند آن را درست پردازش کند.