آموزش CSS – فصل پنجم: پس زمینه (background)

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

آموزش CSS – فصل پنجم: پس زمینه (background)

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

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

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

تنظیم رنگ پس زمینه برای یک المان در CSS

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

رنگ پس زمینه برای یک صفحه به صورت زیر تنظیم می شود:


در سی اس اس مقدار یک رنگ اغلب به این صورت مشخص می شود:

  • یک نام رنگ معتبر – مثل red
  • یک مقدار hex – مثل #ff0000
  • یک مقدار rgb – مثل rgb(255,0,0)

برای توضیحات کامل راجع به رنگ ها به فصل هفتم آموزش HTML نتران مراجعه کنید.

در مثال زیر هر یک از المان های <h1> ، <p> ، <div> رنگ های پس زمینه متفاوتی دارند:


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

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

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

تصویر پس زمینه برای یک صفحه به این صورت تنظیم می شود:


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

تکرار تصویر در پس زمینه (background-repeat)

به صورت پیشفرض مولفه background-image یک تصویر را هم به صورت افقی و هم عمودی تکرار می کند.

بعضی از تصویر ها باید فقط به یکی از روش های افقی یا عمودی تکرار شوند وگرنه بد نمایش داده می شوند.

اگر شما بخواهید یک تصویر فقط به صورت افقی تکرار شود، می توانید از background-repeat: repeat-x; استفاده کنید.

همچنین برای تکرار تصویر به صورت عمودی background-repeat: repeat-y; را می توانید استفاده کنید.


استفاده از no-repeat برای تکرار نکردن تصویر پس زمینه

برای نمایش دادن تنها یک بار و بدون تکرار یک تصویر پس زمینه، باید از مولفه background-repeat با مقدار no-repeat استفاده کرد:


تنظیم محل تصویر پس زمینه با background-position

در بسیاری از موارد شاید ما بخواهیم که محل تصویر را تغییر دهیم، طوری که زیاد مزاحم متن نباشد. محل تصویر پس زمینه به وسیله مولفه background-position مشخص می شود:


مولفه background-attachment

برای مشخص کردن اینکه تصویر پس زمینه ثابت شده باشد و با حرکت صفحه، حرکت نکند از مولفه background-attachment با مقدار fixed باید استفاده کرد:


برای مشخص کردن اینکه تصویر زمینه نباید ثابت باشد و به همراه صفحه باید اسکرول شود، مقدار این مولفه را برابر scroll بگذارید:


نوشتن همه مولفه های پس زمینه در مولفه background

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

مولفه مختصر نویسی برای پس زمینه، مولفه background می باشد:


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

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

تا وقتی که این ترتیب رعایت شود مولفه پس زمینه به درستی پاسخ میدهد و مهم نیست اگر خواستید یکی از این مقدایر را وارد نکنید، فقط ترتیب مهم است.

تمامی مولفه های CSS ممکن برای ایجاد تغییرات پس زمینه برای یک المان، این موارد هستند:

backgroundتمامی مولفه های پس زمینه در یک مولفه
background-attachment این مولفه ثابت بودن یا اسکرول شدن تصویر را مشخص می کند.
background-clipاین مولفه مشخص می کند که تصویر پس زمینه از کجا شروع شود. می توانید از مقادیر padding-box و content-box برای افزایش محدوده پس زمینه استفاده کنید.
background-color این مولفه رنگ پس زمینه المان را تعیین می کند.
background-image این مولفه تصویر پس زمینه المان را تعیین می کند.
background-origin مکان تصویر یا تصاویر پس زمینه را مشخص می کند.
background-position نقطه شروع تصویر پس زمینه را مشخص می کند.
background-repeat نحوه تکرار یک تصویر پس زمینه را مشخص می کند.
background-size اندازه تصویر یا تصاویر پس زمینه را مشخص می کند.

ویدیوها و مطالب مشابه