نحوه اضافه کردن تصویر پس زمینه به هدر با کمک تگ های HTML

در این آموزش می آموزیم که چگونه با استفاده از <div> برای ساختن قسمت بالای صفحه استفاده کنید. پس با آذردیتا همراه باشید تا این موضوع ( نحوه اضافه کردن تصویر پس زمینه به هدر با HTML ) رو به زبانی ساده بررسی و تحلیل کنیم.

کاربرد css در نحوه اضافه کردن تصویر پس زمینه به هدر

ما برای تعیین ارتفاع <div> از ویژگی style استفاده خواهیم کرد، یک تصویر پس زمینه را اعمال خواهیم کرد و مشخص خواهیم کرد که تصویر پس زمینه باید کل منطقه <div> را پوشش دهد.

قبل از شروع کار، به تصویر زمینه نیاز خواهیم داشت. شما می توانید تصویر زمینه سایت ما را به منظور آموزش بارگیری و استفاده کنید، یا می توانید یک تصویر جدید انتخاب کنید.

پس از انتخاب تصویر پس زمینه ، تصویر را در پوشه تصاویر خود به عنوان

background-image.jpg ذخیره کنید.

سپس، قطعه کد برجسته شده را در فایل index.html خود در زیر برچسب باز <body> و بالای بسته شدن </ body> قرار دهید

. . .
  <body>
  <!--First section-->
    <div style="background-image: url('Image_Location');
    background-size: cover; height:540px;">
    </div>
  </body>
</html>

حتماً متن مورد نظر Image_Location را با مسیر پرونده تصویر خود تغییر دهید و فراموش نکنید که برچسب بستن </div> را اضافه کنید.

فایل را ذخیره کرده و مجدداً آن را در مرورگر بارگیری کنید.

همچنین می توانید به جای تصویر پس زمینه از یک رنگ پس زمینه استفاده کنید.

برای استفاده از رنگ پس زمینه ، قطعه کد عنصر <div> را که اخیراً ایجاد کرده اید با قطعه کد <div> برجسته شده زیر، جایگزین کنید

...
  <body>
    <div style="background-color: #f4bc01; height:540px;">
    </div>
  </body>
</html>

برای بررسی نتایج ، فایل را ذخیره کرده و مجدداً آن را در مرورگر بارگیری کنید.

تصویر پس زمینه اکنون باید با کانتینری به همان اندازه جایگزین شود و رنگ زرد آن یکنواخت باشد.

قرار دادن عکس در هدر html

برای قرار دادن یک عکس در هدر (header) یک صفحه HTML، می‌توانید از تگ‌های HTML و CSS استفاده کنید. در اینجا یک نمونه ساده آورده شده است:

۱. استفاده از HTML

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>هدر با تصویر</title>
    <style>
        /* استایل CSS برای هدر */
        header {
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
        }
        header img {
            width: 100%;
            max-width: 600px;
            height: auto;
        }
    </style>
</head>
<body>
    <header>
        <img src="path-to-your-image.jpg" alt="توضیحی درباره تصویر">
    </header>
    <main>
        <p>محتوای صفحه اینجا قرار می‌گیرد.</p>
    </main>
</body>
</html>

۲. توضیحات

تگ <header>: برای تعریف هدر صفحه استفاده می‌شود.
تگ <img>: برای نمایش تصویر استفاده می‌شود. ویژگی src مسیر تصویر را مشخص می‌کند و ویژگی alt توضیحی کوتاه درباره تصویر ارائه می‌دهد.
استایل CSS:
- background-color: رنگ پس‌زمینه هدر را تعیین می‌کند.
- padding: فضای داخلی هدر را تنظیم می‌کند.
- text-align: ترازبندی متن داخل هدر را مشخص می‌کند.
- img: تنظیمات برای تصویر داخل هدر (عرض تصویر به صورت ۱۰۰% صفحه تنظیم شده و حداکثر عرض آن ۶۰۰ پیکسل است).

این روش یک هدر ساده با یک تصویر را ایجاد می‌کند. می‌توانید با اضافه کردن استایل‌های بیشتر و تغییر تنظیمات CSS، هدر خود را به شکل دلخواه طراحی کنید.

اگر کانتینر <div> موجود در سایت خود را با همان کانتینر <div> موجود در سایت نمایش مقایسه کنید ، می توانید متوجه شوید که کانتینر <div> صفحه وب شما با حاشیه کمی از فضای سفید احاطه شده است. این حاشیه به این دلیل است که تمام صفحات HTML بطور خودکار تنظیم می شوند که حاشیه کوچکی به طور پیش فرض داشته باشند.

برای حذف این حاشیه ، باید یک ویژگی استایل را به برچسب <body> (بازشده) اضافه کنیم که حاشیه عنصر <body> صفحه HTML را بر روی ۰ پیکسل تنظیم کند.