ویژگی کوتاه پس‌زمینه CSS

ویژگی کوتاه background CSS

برای کاهش کد، می‌توانید تمام ویژگی‌های پس‌زمینه را در یک ویژگی مشخص کنید. این ویژگی به عنوان ویژگی کوتاه شناخته می‌شود.

به جای این:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

شما می‌توانید از ویژگی‌های کوتاه استفاده کنید background:

مثال

تنظیم ویژگی‌های پس‌زمینه در یک عبارت به صورت کوتاه:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

آزمایش کنید

در استفاده از ویژگی‌های کوتاه، ترتیب مقادیر به صورت زیر است:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

در صورت نبود یکی از مقادیر ویژگی‌ها، مهم نیست، فقط باید مقادیر دیگر را به ترتیب تنظیم کنید. توجه داشته باشید که در مثال بالا ما از ویژگی background-attachment استفاده نکردیم زیرا هیچ مقادیری ندارد.

تمام ویژگی‌های پس‌زمینه CSS

ویژگی توضیح
background تنظیم تمام ویژگی‌های پس‌زمینه در یک عبارت به صورت اختصاری.
background-attachment تنظیم اینکه تصویر پس‌زمینه ثابت است یا با بقیه بخش‌های صفحه می‌چرخد.
background-clip تعیین محدوده نقاشی پس‌زمینه.
background-color تنظیم رنگ پس‌زمینه عنصر.
background-image تنظیم تصویر پس‌زمینه عنصر.
background-origin تعیین مکان قرارگیری تصویر پس‌زمینه.
background-position تنظیم موقعیت شروع تصویر پس‌زمینه.
background-repeat تنظیم تکرار تصویر پس‌زمینه و نحوه آن.
background-size اندازه‌گیری تصویر پس‌زمینه.