نمایش یک عکس در پس زمینه یک عنصر، با مشخصه background-image ، در CSS
با استفاده از مشخصه background-image در CSS ، می توانیم یک عکس را در پس زمینه یک عنصر از صفحه قرار بدهیم. شیوه کلی به کار بردن مشخصه background-image ، به صورت زیر می باشد :
در کد بالا فرض کرده ایم که عکس دارای نام myImage.png بوده و در پوشه حاوی فایل فعلی (فایلی که در حال اجرای کدهای آن هستیم) قرار دارد. اگر مسیر و نام فایل عکس، متفاوت باشد، باید به جای عبارت myImage.png ، مسیر مربوط به فایل عکس و نام آن را بنویسید.
هنگامی که مشخصه background-image را به کار می بریم، بهتر است که بعد از آن، با مشخصه background-repeat ، اینکه پس زمینه عنصر از تکرار آن عکس نمایش داده شود و یا تنها از یک بار نمایش آن تشکیل شده باشد را هم تعیین کنیم. برای مشخصه background-repeat ، موارد زیر را می توانیم تعیین کنیم (یکی را باید انتخاب کنیم) :
حالت no-repeat :
عکس تکرار نمی شود و تنها یک بار در پس زمینه نمایش داده خواهد شد.
حالت repeat :
عکس هم در جهت افقی (horizontally) و هم در جهت عمودی (vertically)، تکرار می شود.
حالت repeat-x :
عکس فقط در جهت افقی (horizontally) تکرار می شود.
حالت repeat-y :
عکس فقط در جهت عمودی (vertically) تکرار می شود.
به مثال های زیر توجه کنید :
نتیجه :
نتیجه :
نتیجه :
نتیجه :
