تصویر پس زمینه CSS

در این راهنما، «تصویر پس زمینه (Background Image)» در CSS را می شناسیم. می بینید چگونه با ویژگی background-image برای کل صفحه یا یک عنصر خاص تصویر تعیین کنیم و چرا انتخاب درست تصویر اهمیت دارد.

آشنایی با ویژگی background-image

ویژگی background-image یک تصویر را به عنوان پس زمینه عنصر تنظیم می کند. به طور پیش فرض، تصویر تکرار می شود تا کل عنصر را بپوشاند.

body {  background-image: url("paper.gif");}

می توانید همین ویژگی را برای هر عنصر HTML به کار ببرید؛ برای نمونه عنصر p:

p {  background-image: url("paper.gif");}

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

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

body {  background-image: url("bgdesert.jpg");}

نکته: در انتخاب تصویر پس زمینه، بافت و روشنایی را طوری برگزینید که متن واضح بماند. در صورت نیاز، مسیر یادگیری را از پس زمینه CSS ادامه دهید یا فصل تکرار پس زمینه را بخوانید.

لینک های تکمیلی درباره تصویر پس زمینه CSS

تصویر پس زمینه CSS در MDN را ببینید. همچنین مرجع پس زمینه در CSS برای مرور کلی مفید است.

برای ادامه مباحث، به بخش پس زمینه بازگردید یا فصل background-repeat را دنبال کنید.