آشنایی با خاصیت background در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 14:41:15

خاصیت و دستور background در استایل CSS یک دستور برای تعیین پس زمینه یک عنصر و یک المنت است. با این دستور ما می توانیم یک تصویر یا یک رنگ ثابت را به عنوان پس زمینه یک المنت تعیین کنیم. این خاصیت از پرکاربردترین دستورها در استایل ها به شمار می رود. در این تاپیک از تاکینا در این خصوص بحث بیشتری خواهیم کرد.

دستور خام به همراه مقادیر مجاز به این صورت است:

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

 

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

  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment

 

مثال استفاده از این خاصیت برای تعیین یک تصویر بعنوان پس زمینه:

body {
  background: lightblue url("img_tree.gif") no-repeat fixed center;
}

مثال استفاده از خاصیت پس زمینه برای تعیین یک رنگ بعنوان پس زمینه یک المنت:

.talkina {background-color: #000EFa}

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

با این دستور، تصویر شما به صورت کامل المنت مورد نظر را خواهد پوشاند. اینکار باعث بهتر دیده شدن المنت ها خواهد شد زمانی که تصویر پس زمینه نسبت اندازه مناسبی برای دیده شدن نداشته باشد.

body {
  background: lightblue url("img_tree.gif") no-repeat fixed center;
  background-size: cover;
}