آموزش تصاویر پس زمینه در HTML

در ادامه مطالب آموزش طراحی سایت، در این مقاله به آموزش تصاویر پس زمینه (Background Images) در HTML می پردازیم.

یک تصویر پس زمینه می تواند تقریبا برای هر عنصر HTML تعیین شود. یعنی شما می توانید به هر عنصر دلخواه در صفحه، یک تصویر پس زمینه الصاق کنید. برای اضافه کردن یک تصویر پس زمینه به یک عنصر HTML، از ویژگی style و مشخصه background-image استفاده کنید.

آموزش طراحی سایت

در این کد به تگ های div مشخصه background-image تخصیص داده شده است. این کار با استفاده از یک url (یعنی همان آدرس عکس) انجام شده است. که در زیر می توانید خروجی کد بالا را مشاهده کنید:

آموزش تصاویر پس زمینه در HTML

شما همچنین می توانید برای هر عنصر دلخواه در بخش style نیز تصویر پس زمینه انتخاب کنید:

آموزش Background Images در HTML

در این کد به تمام div های صفحه، background-image داده شده است که خروجی آن را می توانید در زیر مشاهده کنید:

آموزش HTML

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

اگر که می خواهید تمام صفحه تصویر پس زمینه داشته باشد، باید پس زمینه را به عنصر body اختصاص دهید:

آموزش طراحی سایت

در کد بالا، background-image به body صفحه اختصاص داده شده و عکس مشخص شده (img_girl.png) به کل صفحه HTML اعمال خواهد شد. دقت داشته باشید که اگر اندازه عنصر HTML از اندازه تصویر بزرگتر باشد، تصویر تکرار خواهد شد. در کد بالا، اندازه body از اندازه تصویر بیشتر است. بنابراین مشاهده می کنید که تصویر در انتهای صفحه مجددا تکرار شده است. نتیجه کد بالا به شکل زیر است:

آموزش تصاویر پس زمینه در HTML

تکرار تصویر پس زمینه

اگر عنصر HTML که تصویر پس زمینه به آن تخصیص داده شده از تصویر بزرگتر باشد، تصویر به صورت خودکار تکرار می شود، بصورت افقی و عمودی و تا جایی که به انتهای عنصر برسد:

آموزش HTML

در این مثال، تصویر آنقدر تکرار شده تا تمام فضای body را پر کند که در زیر قابل مشاهده است:

آموزش طراحی سایت

برای جلوگیری از تکرار شدن تصویر پس زمینه، مقدار مشخصه ی background-repeat را روی no-repeat قرار دهید.

آموزش تصاویر پس زمینه در HTML

در این مثال، تصویر تکرار نخواهد شد و فقط یک بار در صفحه نمایش داده می شود در زیر مشاهده می کنید که body فضای بیشتری از تصویر دارد اما تصویر تکرار نشده است:

آموزش HTML

کاور شدن پس زمینه

اگر شما می خواهید که تصویر پس زمینه تمام فضای عنصر را در بر بگیرد، باید مشخصه background-size را روی cover تنطیم کنید. همچنین، برای اطمینان از اینکه تمام عنصر کاور شده است، مشخصه background-attachment را روی fixed تنظیم کنید.

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

آموزش تصاویر پس زمینه در HTML

نتیجه کد بالا، در زیر قابل مشاهد است:

آموزش طراحی سایت

کشیدن پس زمینه

اگر نیاز دارید تا به منظور فیکس شدن تصویر برای عنصر، تصویر کش بیاید، می توانید مشخصه background-size را روی 100% 100% قرار دهید:

آموزش HTML

ما این حالت را پیشنهاد نمی کنیم زیرا همانطور که در زیر مشاهده می کنید، در این حالت تصویر دفرمه (deform) شده و ظاهر خوبی ندارد. استفاده از background-cover به همراه background-attachment گزینه بهتری است.

آموزش طراحی سایت

آموزش طراحی سایت آموزش HTML آموزش تصاویر پس زمینه در HTML آموزش Background Images دوره آموزش طراحی سایت