در حال بارگذاری...

تصویر پس‌زمینه

تصویر پس‌زمینه (background-image) در CSS وسیله‌ای قدرتمند برای زیباسازی صفحات وب است؛ مانند ساختمان‌سازی که پس از ساخت دیوار، آن را با رنگ یا کاغذدیواری تزئین می‌کنیم. در سایت فروشگاهی آنلاین (online shop)، تصویر پس‌زمینه می‌تواند فضای تبلیغاتی یا جشنواره را تقویت کند. در سایت خبری (news website)، تصویر پس‌زمینه به تفکیک بخش‌ها کمک می‌کند. در وبلاگ شخصی (personal blog)، نشان‌دهنده سبک نویسنده است و در پورتال دولتی (government portal)، حسی رسمی و معتبر را منتقل می‌کند.
در این آموزش پیشرفته، خواهید آموخت چطور تصویر پس‌زمینه را تنظیم کنید، اندازه و موقعیت آن را کنترل نمایید، عملکرد آن را به‌صورت واکنش‌گرا (responsive) بهینه کنید و روش‌های جلوگیری از اشتباهات متداول را بشناسید. مانند سازماندهی کتابخانه، هر تصویر جای مشخصی دارد، باید خوانا باشد و از نظر طراحی هماهنگ باقی بماند. این آموزش شما را قادر می‌سازد تا در پروژه‌های واقعی تصویری حرفه‌ای و کارآمد خلق کنید.

مثال پایه

css

CSS Code

/* هدر اصلی با تصویر پس‌زمینه تمام عرض */
.header-main {
background-image: url('header-bg.jpg'); /* مسیر تصویر */
background-repeat: no-repeat; /* جلوگیری از تکرار */
background-size: cover; /* تصویر کل بخش را پوشش می‌دهد */
background-position: center center; /* محور مرکزی */
height: 500px; width: 100%; display: flex; align-items: center; justify-content: center;
}

در این مثال .header-main یک هدر با تصویر پس‌زمینه عرض کامل دارد. background-image مسیر تصویر را مشخص می‌کند. background-repeat: no-repeat از تکرار ناخواسته تصویر جلوگیری می‌کند که در غیر این صورت ممکن است ظاهر نا‌منظم ایجاد کند.
background-size: cover تصویر را به گونه‌ای مقیاس می‌دهد که کل بخش را پر کند، حتی اگر بخشی از تصویر برش بخورد. این گزینه برای هدرها یا بخش‌های بزرگ بسیار مناسب است. background-position: center center تصویر را در وسط پهنه قرار می‌دهد تا مهم‌ترین قسمت همیشه قابل مشاهده باشد.
مشخص کردن height: 500px ضروری است چون بدون ارتفاع، بخش ممکن است ۰ پیکسل باشد و تصویر نمایش داده نشود. width: 100% عرض کامل صفحه را می‌گیرد. با استفاده از display: flex و align-items: center; justify-content: center می‌توانید محتوا (مثل عنوان یا دکمه) را دقیقاً روی تصویر وسط‌چین کنید. بسیاری از مبتدیان وقتی تصویر ظاهر نمی‌شود، به مسیر اشتباه یا فقدان ارتفاع فکر نمی‌کنند؛ ابزارهای DevTools برای بررسی استایل و مسیر تصویر بسیار مفیدند.

مثال کاربردی

css

CSS Code

/* بنر تبلیغاتی برای فروشگاه آنلاین */
.promo-banner {
background-image: url('promo-sale.webp');
background-repeat: no-repeat;
background-size: contain; /* تصویر کامل دیده شود */
background-position: top center;
background-color: #f8f8f8; /* رنگ پشتیبان */
padding: 40px 20px; min-height: 300px; text-align: center;
}

در این مثال .promo-banner برای بخش تبلیغاتی در یک فروشگاه آنلاین طراحی شده است. background-size: contain تصویر را به‌طور کامل نمایش می‌دهد، بدون برش، که برای لوگو یا تصویر محصول بسیارمناسب است. این گزینه برخلاف cover هیچ بخشی از تصویر را حذف نمی‌کند.
background-position: top center تصویر را در بالای بخش و وسط صفحه قرار می‌دهد، به‌طوری‌که زیر آن فضای کافی برای متن یا دکمه وجود دارد. background-color: #f8f8f8 به‌عنوان رنگ پشتیبان عمل می‌کند اگر تصویر دیر یا اصلاً لود نشود.
استفاده از padding و min-height باعث می‌شود بنر در همه اندازه‌های صفحه قابل دید باشد و فضای کافی برای محتوا ایجاد کند. text-align: center نیز متن داخل بنر را دقیقاً وسط‌چین می‌کند. این ساختار کاربردی برای بخش‌های تبلیغاتی فروشگاه، اخبار برجسته، یا اعلان‌ها در بلاگ شخصی یا پورتال دولتی مناسب است—جایی که تصویر تزئینی است ولی فضا برای عنصر تعاملی یا متنی باقی می‌ماند.

بهترین روش‌ها و اشتباهات متداول:
بهترین روش‌ها:

طراحی با اولویت موبایل (mobile-first): از media queries استفاده کنید تا در موبایل تصویر سبک‌تر یا متفاوتی نمایش داده شود.
بهینه‌سازی عملکرد (performance): تصاویر با قالب WebP یا AVIF استفاده کنید، حجم آن‌ها را کمپرس کرده و ترجیحاً از CDN بارگذاری نمایید.
نگهداری‌پذیری (maintainable code): از نام کلاس‌های معنایی و متغیرهای CSS برای مسیر تصویر و مقادیر استفاده کنید تا کد تمیز و قابل نگهداری بماند.
استراتژی جایگزین (fallback): همیشه background-color یا گرادیان CSS به‌عنوان جایگزین تعریف کنید.
اشتباهات رایج:
مسیر اشتباه تصویر: بسیاری از مواقع تصویر نمایش نمی‌یابد به‌دلیل نوشتن نادرست مسیر یا نام فایل.
نداشتن ارتفاع: بدون height یا محتوای داخل، عنصر پس‌زمینه دیده نمی‌شود.
استفاده زیاد از !important یا سلکتورهای با specificity بالا:‌ پیچیدگی در نگهداری و بروز رسانی ایجاد می‌شود.
طراحی غیرواکنش‌گرا: استفاده از مقادیر ثابت پیکسل بدون media queries ممکن است در دستگاه‌های کوچک نمایش را خراب کند.
نکات رفع خطا:
– در ابزار توسعه مرورگر (DevTools)، استایل‌های محاسبه‌شده و وضعیت شبکه را بررسی کنید.
– نمایش در اندازه‌های مختلف صفحه را تست نمایید.
– برای تشخیص محدوده عنصر، موقتاً رنگ پس‌زمینه تعریف کنید تا ببینید آیا اندازه‌ای دارد یا خیر.
توصیه عملی:
از CSS variable برای مسیر تصویر و مقادیر استفاده کنید و منطق تصویر پس‌زمینه را در کامپوننت‌های جداگانه سازماندهی کنید تا مقیاس‌پذیری و خوانایی حفظ شود.

📊 مرجع سریع

Property/Method	Description	Example
background-image	تعیین URL تصویر پس‌زمینه	background-image: url('image.jpg')
background-repeat	کنترل تکرار تصویر	background-repeat: no-repeat
background-size	تنظیم مقیاس تصویر	background-size: cover
background-position	محل قرارگیری تصویر	background-position: center center
background-color	رنگ پشتیبان در صورت عدم لود تصویر	background-color: #ddd
background-attachment	ثابت یا همراه اسکرول بودن	background-attachment: fixed

در جمع‌بندی، تصویر پس‌زمینه ابزاری بصری پرقدرت است که تجربه کاربری و طراحی سایت شما را تقویت می‌کند، مشروط بر اینکه بهینه و قابل نگهداری باشد. در این آموزش یاد گرفتید چگونه تصاویر را بارگذاری، موقعیت‌یابی، اندازه‌دهی و fallback گذاری کنید و از خطاهای رایج اجتناب نمایید.
تصویر پس‌زمینه به ساختار HTML وابسته است، معمولاً روی المان‌هایی چون div یا section اعمال می‌شود. همچنین می‌توانید توسط JavaScript تصویر را به‌صورت داینامیک تغییر دهید، مثلاً بر اساس زمان روز یا رفتار کاربر.
برای ادامه یادگیری پیشنهاد می‌شود این موضوعات را بررسی کنید:
– Media queries پیشرفته برای تغییر تصویر در دستگاه‌های مختلف
– پس‌زمینه‌های گرادیان با CSS
– افکت پارالاکس با background-attachment: fixed
– ترکیب چند لایه تصویر و گرادیان با background-image: linear-gradient(), url()
تمرین عملی بهترین روش برای تسلط است: بخش‌های واقعی سایت را فقط با تصویر پس‌زمینه CSS طراحی کنید تا تجربه واقعی کسب کنید.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان