پس‌زمینه‌ها در CSS — مرجع عملی و کاربردی

پس‌زمینه‌ها (backgrounds) یکی از اصلی‌ترین بخش‌های طراحی رابط وب هستند. در CSS می‌توانید رنگ، تصویر، گرادیانت، همپوشانی و تنظیمات مربوط به موقعیت و اندازه را کنترل کنید. در این مقاله به صورت جامع و عملی خواهم گفت چگونه از ویژگی‌های مختلف پس‌زمینه استفاده کنید، چه اشتباهاتی رایج است و چگونه برای کارایی و دسترسی بهینه بنویسید.

ویژگی‌های اصلی پس‌زمینه

• background-color: رنگ پس‌زمینه
• background-image: تصویر یا گرادیانت
• background-repeat: تکرار تصویر
• background-position: موقعیت تصویر
• background-size: اندازه تصویر
• background-attachment: رفتار با اسکرول
• background-origin و background-clip: محاسبه باکس برای پس‌زمینه
• background-blend-mode: ترکیب رنگ لایه‌ها
• background (shorthand): یک خطی برای ترکیب موارد بالا

نمونه پایه: رنگ و تصویر

/* basic background */.header {
  background-color: #1e293b;
  background-image: url('pattern.svg');
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

کد بالا یک پس‌زمینه تیره می‌سازد و تصویر pattern.svg را به صورت تکراری در مرکز قرار می‌دهد. در پروژه واقعی توصیه می‌شود ابتدا رنگ پس‌زمینه مشخص شود تا هنگام بارگذاری تصویر، نمایی معقول وجود داشته باشد.

شورت‌هند (shorthand) و ترتیب مقادیر

.hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.0)),
              url('hero.jpg') center/cover no-repeat fixed;
}

در این مثال از شورت‌هند استفاده شده تا گرادیانت، تصویر، موقعیت، اندازه، رفتار تکرار و ضمیمه (attachment) هم‌زمان تنظیم شوند. ترتیب مهم است: ابتدا تصویر یا گرادیانت، سپس موقعیت/اندازه با / جداکننده، و در نهایت تکرار و attachment.

چند پس‌زمینه (Multiple backgrounds)

.card {
  background-image: url('texture.png'), linear-gradient(90deg, #fff, #f3f4f6);
  background-blend-mode: multiply;
  background-size: auto, cover;
  background-position: left top, center;
}

CSS اجازه می‌دهد چندین لایه پس‌زمینه تعریف کنید. لایه اول در بالاترین سطح است. background-blend-mode می‌تواند نحوه ترکیب رنگی لایه‌ها را تغییر دهد (مثلاً multiply یا screen) و برای خلق افکت‌های متنوع مفید است.

گرادیانت‌ها به‌عنوان تصویر

linear-gradient و radial-gradient در عمل تصویر محسوب می‌شوند و می‌توان آن‌ها را به عنوان background-image استفاده کرد. این گرادیانت‌ها برداری هستند و در تمام اندازه‌ها با کیفیت بالا رندر می‌شوند که جایگزین مناسبی برای تصاویر حجیم‌اند.

.banner {
  background-image: linear-gradient(45deg, #06b6d4 0%, #3b82f6 100%);
}

گرادیانت بالا یک ترکیب رنگی زاویه‌دار می‌سازد که به‌خوبی برای هدرها یا بنرها مناسب است. مزیت: بدون بارگیری فایل خارجی و با امکان تغییر داینامیک از طریق متغیرهای CSS.

اندازه، موقعیت و پاسخ‌دهی

background-size: cover و contain پرکاربردترین مقادیر برای تصاویر پس‌زمینه هستند. cover تصویر را طوری مقیاس می‌دهد که کل کانتینر را پر کند (ممکن است بخشی برش بخورد). contain تمام تصویر را درون کانتینر قرار می‌دهد (ممکن است فضا خالی شود).

.responsive-hero {
  background: url('hero-large.jpg') center/cover no-repeat;
  min-height: 60vh;
}

برای تصاویر ریسپانسیو، اغلب از cover به همراه حداقل ارتفاع یا aspect-ratio استفاده می‌شود تا ظاهر ثابت حفظ شود. برای بهینه‌سازی، از تصاویر چند‌رزولوشن یا srcset برای پس‌زمینه‌های حساس به رزولوشن استفاده کنید (با تکنیک‌های CSS یا تصویر در HTML).

بهینه‌سازی و عملکرد

• برای الگوها و آیکون‌ها از SVG یا CSS-generated patterns استفاده کنید — وزن کمتر و مقیاس‌پذیری بهتر.
• اگر تصویر بزرگ است، از فرمت‌های مدرن مثل WebP یا AVIF استفاده کنید.
• برای تصاویر پرکاربرد از CDN و cache-friendly headers بهره ببرید.
• بارگذاری تنبل (lazy-loading) برای تصاویر پس‌زمینه قابل اجرا نیست مگر از تکنیک‌های جایگزین (js یا لیزی کردن کلاس پس از تعامل).

دسترس‌پذیری و کنتراست

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

تکنیک پیشرفته: SVG داخلی و متغیرهای CSS

:root {
  --bg-color: #0f172a;
  --accent: #ef4444;
}
.section {
  background: linear-gradient(90deg, var(--bg-color), #0b1220),
              url("data:image/svg+xml;utf8,") no-repeat center/contain;
}

استفاده از CSS variables اجازه می‌دهد تا ظاهر پویا و قابل سفارشی‌سازی شود. همچنین قرار دادن SVG به‌صورت data URI می‌تواند تعداد درخواست‌ها را کم کند. با این حال باید یوآرآی‌ها را با urlencode مناسب کنند تا از مشکلات کاراکترها جلوگیری شود.

background-origin و background-clip

این دو خاصیت زمانی مهم می‌شوند که المان کادر و padding یا border خاصی داشته باشد و بخواهید دقیقاً محل رندر پس‌زمینه را کنترل کنید.

نمونه بهینه و اصلاح‌شده برای هدر ریسپانسیو

.site-hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
              url('/images/hero-1600.jpg') center/cover no-repeat;
  min-height: 60vh;
  color: #fff;
}
@media (max-width: 768px) {
  .site-hero {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                      url('/images/hero-800.jpg');
  }
}

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

نکات پایانی و بهترین شیوه‌ها

• همیشه رنگ fallback تعیین کنید.
• برای تصاویر بزرگ، از WebP/AVIF و چند رزولوشن استفاده کنید.
• گرادیانت‌ها و SVG‌ها را برای الگوها در نظر بگیرید — حجم کمتر و انعطاف‌پذیری بالاتر.
• دسترس‌پذیری متن روی پس‌زمینه را بررسی کنید و در صورت نیاز overlay اضافه نمایید.
• برای حرکت روان‌تر پس‌زمینه در اسکرول از transform و افکت‌های CSS مدرن استفاده کنید، نه تغییر مستقیم موقعیت که ممکن است reflow ایجاد کند.

با ترکیب این مفاهیم می‌توانید پس‌زمینه‌های زیبا، بهینه و قابل نگهداری بسازید که هم در ظاهر زیبا باشند و هم عملکرد و دسترس‌پذیری را در اولویت قرار دهند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال