یک تصویر پس زمینه می تواند تقریبا برای هر عنصر HTML تعیین شود. یعنی شما می توانید به هر عنصر دلخواه در صفحه، یک تصویر پس زمینه الصاق کنید. برای اضافه کردن یک تصویر پس زمینه به یک عنصر HTML، از ویژگی style و مشخصه background-image استفاده کنید.
در این کد به تگ های div مشخصه background-image تخصیص داده شده است. این کار با استفاده از یک url (یعنی همان آدرس عکس) انجام شده است. که در زیر می توانید خروجی کد بالا را مشاهده کنید:
شما همچنین می توانید برای هر عنصر دلخواه در بخش style نیز تصویر پس زمینه انتخاب کنید:
در این کد به تمام div های صفحه، background-image داده شده است که خروجی آن را می توانید در زیر مشاهده کنید:
تصویر پس زمینه برای یک صفحه
اگر که می خواهید تمام صفحه تصویر پس زمینه داشته باشد، باید پس زمینه را به عنصر body اختصاص دهید:
در کد بالا، background-image به body صفحه اختصاص داده شده و عکس مشخص شده (img_girl.png) به کل صفحه HTML اعمال خواهد شد. دقت داشته باشید که اگر اندازه عنصر HTML از اندازه تصویر بزرگتر باشد، تصویر تکرار خواهد شد. در کد بالا، اندازه body از اندازه تصویر بیشتر است. بنابراین مشاهده می کنید که تصویر در انتهای صفحه مجددا تکرار شده است. نتیجه کد بالا به شکل زیر است:
تکرار تصویر پس زمینه
اگر عنصر HTML که تصویر پس زمینه به آن تخصیص داده شده از تصویر بزرگتر باشد، تصویر به صورت خودکار تکرار می شود، بصورت افقی و عمودی و تا جایی که به انتهای عنصر برسد:
در این مثال، تصویر آنقدر تکرار شده تا تمام فضای body را پر کند که در زیر قابل مشاهده است:
برای جلوگیری از تکرار شدن تصویر پس زمینه، مقدار مشخصه ی background-repeat را روی no-repeat قرار دهید.
در این مثال، تصویر تکرار نخواهد شد و فقط یک بار در صفحه نمایش داده می شود در زیر مشاهده می کنید که body فضای بیشتری از تصویر دارد اما تصویر تکرار نشده است:
کاور شدن پس زمینه
اگر شما می خواهید که تصویر پس زمینه تمام فضای عنصر را در بر بگیرد، باید مشخصه background-size را روی cover تنطیم کنید. همچنین، برای اطمینان از اینکه تمام عنصر کاور شده است، مشخصه background-attachment را روی fixed تنظیم کنید.
با این روش، تصویر پس زمینه تمام عنصر را پوشش می دهد، بدون هیچ تغییراتی در تناسب تصویر:
نتیجه کد بالا، در زیر قابل مشاهد است:
کشیدن پس زمینه
اگر نیاز دارید تا به منظور فیکس شدن تصویر برای عنصر، تصویر کش بیاید، می توانید مشخصه background-size را روی 100% 100% قرار دهید:
ما این حالت را پیشنهاد نمی کنیم زیرا همانطور که در زیر مشاهده می کنید، در این حالت تصویر دفرمه (deform) شده و ظاهر خوبی ندارد. استفاده از background-cover به همراه background-attachment گزینه بهتری است.
