پس زمینه CSS

 

از خصوصیت background می توانید برای مختصر نویسی خصوصیت های مربوط به پس زمینه استفاده نمایید.

خصوصیت هایی که می توایند تنظیم نمایید:

 

  1. background-color

رنگ پس زمینه یک عنصر را تنظیم می کند.

  1. background-position

شروع مکان قرارگیری عکس پس زمینه را تنظیم می کند.

  1. background-size

اندازه تصویر پس زمینه را تنظیم می کند.

  1. background-repeat

چگونگی تکرار عکس پس زمینه را تنظیم می کند.

  1. background-origin

ناحیه قرار گیری عکس پس زمینه را مشخص می کند. (تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد)

  1. background-clip

ناحیه رنگ آمیزی پس زمینه را مشخص می کند.

  1. background-attachment

مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه

  1. background-image

عکس های پس زمینه را تنظیم می کند.

 

 

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

 


 

  1. background-color

با استفاده از خصوصیت background-color می توانید رنگ پس زمینه یک عنصر را تنظیم نمایید.

 


  1. background-position

با استفاده از خصوصیت background-position، می توانید مکان شروع قرارگیری عکس پس زمینه را مشخص نمایید.

مقادیر ممکن :

  • left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom

 


  1. background-size

با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.

 


 

  1. background-repeat

با استفاده از خصوصیت background-repeat، می توانید نحوه تکار عکس پس زمینه را در جهت افقی و عمودی مشخص نمایید. (اگر مایل به تکرار آن هستید)

بصورت پیشفرض، عکس پس زمینه در هر دو جهت افقی و عمودی تکرار می شود.

 


  1. background-origin

با استفاده از خصوصیت background-origin، می توانید عکس پس زمینه را نسبت به یکی از مکان های content یا padding و یا border مکان دهی نمایید.

 


  1. background-clip

با استفاده از خصوصیت background-clip، می توانید ناحیه رنگ آمیزی پس زمینه را مشخص نمایید.


 

  1. background-attachment

با استفاده از خصوصیت background-attachment می توانید تنظیم نمایید که، اگر صفحه Scroll داشت و به سمت پایین یا بالا حرکت کردیم آیا عکس پس زمینه در جای خود ثابت بماند یا خیر.


 

  1. background-image

با استفاده از خصوصیت background-image، می توانید برای یک عنصر، یک یا چند عکس پس زمینه تنظیم نمایید.

پس زمینه یک عنصر، شامل content و border و padding است. (margin شامل پس زمینه نمی شود)

بصورت پیشفرض، عکس پس زمینه در گوشه بالا سمت چپ قرار می گیرد و همچنین در دو جهت عمودی و افقی تکرار می شود.

به این پست امتیاز دهید.
بستن