آموزش

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

نحوه اضافه کردن تصویر پس زمینه به بخش بالای صفحه وب با 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>

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

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

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

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

<body style=“margin:0;”>

پرونده را در مرورگر خود ذخیره و بارگیری مجدد کنید. اکنون نباید حاشیه سفیدی در اطراف کانتینر <div> بالا وجود داشته باشد.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۲ میانگین: ۳]

سعید زارعین

سعید هستم 27 ساله، یک عدد تولید محتوا(ئر) خلاق :)))

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا