آموزش کار با پس زمینه ها یا Backgrounds در CSS

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

آموزش کار با پس زمینه ها یا Backgrounds در CSS

Free-Learn

کار با پس زمینه ها یا Backgrounds در CSS

در این بخش / جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با پس زمینه ها یا Backgrounds در CSS کار کنیم ، در واقع از این ویژگی برای ایجاد پس زمینه ( تصویر یا رنگ ) برای یک عنصر استفاده می شود.

ویژگی Background دارای حالت های مختلفی می باشد که این حالت به شرح زیر می باشد :

  • background-color : برای تنظیم رنگ پس زمینه
  • background-image : برای تنظیم تصویر پس زمینه
  • background-repeat : برای تکرار کردن تصویر پس زمینه
  • background-attachment : برای تنظیم نحوه قرار گیری تصویر پس زمینه
  • background-position : برای تنظیم موقعیت قرار گیری تصویر پس زمینه

Free-Learn

ویژگی background-color در CSS

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

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

مثال :

امتحان کنید

Free-Learn

ویژگی background-image در CSS

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

مثال :

امتحان کنید

Free-Learn

ویژگی background-repeat در CSS

با استفاده از این ویژگی میتوانیم مشخص کنیم که آیا تصویر پس زمینه مان تکرار شود یا خیر! این تکرار یعنی اینکه تصویر در حالت پیش فرض بصورت افقی یا عمودی کاشی وار تکرار می شود.

یک تصویر بصورت پیش فرض دارای تکرار می باشد.

مثال شماره ۱ : تصویر بصورت پیشفرض دارای تکرار هم بصورت افقی و هم عمودی می باشد

امتحان کنید

مثال شماره ۲ : بدون تکرار

امتحان کنید

مثال شماره ۳ : تکرار بصورت فقط افقی

امتحان کنید

مثال شماره ۴ : تکرار فقط بصورت عمودی

امتحان کنید

Free-Learn

ویژگی background-attachment در CSS

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

نمونه : در حالت فیکس (Fixed) ثابت

سلام خوبی؟

مثال :

امتحان کنید

مثال شماره ۲ : در حالت اسکرول (یعنی با اسکرول کردن تصویر هم جابه جا میشه)

امتحان کنید

Free-Learn

ویژگی background-position در CSS

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

مثال :

امتحان کنید

Free-Learn