با CSS یک بلوک هدر بسازید که تصویر پس‌زمینه‌اش به‌صورت پاسخگو با background-size: cover تمام عرض را بپوشاند و روی اندازه‌های مختلف صفحه درست نمایش داده شود.

برای بلوک هدر با پس‌زمینه پاسخگو از یک عنصر HTML مثل header استفاده کن و در CSS با background-image تصویر را تعیین کن. با استفاده از background-size: cover؛ background-position: center؛ و background-repeat: no-repeat؛ تصویر را به‌طور کامل عرض صفحه پوشش می‌دهد و مرکز تصویر حفظ می‌شود. برای سازگاری ارتفاع، از height: 50vh یا min-height استفاده کن و از media queries برای نسبت‌های مختلف صفحه استفاده کن تا نمایش صحیح باقی بماند. اگر می‌خواهی تصویر در اندازه‌های مختلف کامل دیده شود، می‌توانی از background-size: contain یا مقادیر درصد/px استفاده کنی و از shorthand background برای کوتاه‌سازی کد بهره ببری.