یک بخش "hero" ساده با HTML/CSS بسازید که تصویر پس‌زمینه از یک URL یا فایل محلی نمایش دهد، تصویر در مرکز قرار گیرد و به‌صورت کامل پوشش دهد (cover) و تکرار نشود، و یک پوشش گرادیان نیمه‌شفاف روی تصویر برای خوانایی متن قرار گیرد.

برای حل این تمرین از HTML و CSS استفاده کنید؛ در CSS از ویژگی background-image با url() برای تصویر و از linear-gradient برای ایجاد پوشش استفاده کنید (می‌توانید از قابلیت چندپس‌زمینه برای قرار دادن گرادیان روی تصویر بهره ببرید). نکات: background-size: cover برای پر کردن کامل بخش، background-position: center برای تراز کردن مرکز، background-repeat: no-repeat برای جلوگیری از تکرار و استفاده از rgba در گرادیان برای نیمه‌شفاف کردن پوشش؛ همچنین می‌توانید با قرار دادن متن داخل همان بخش و تنظیم رنگ و فاصله‌ها خوانایی را افزایش دهید.