آموزش ویژگی background در CSS

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

آموزش ویژگی background در CSS

Free-Learn

ویژگی background در CSS

با استفاده از ویژگی background میتوان ویژگی های زیر را که همگی مربوط به تنظیم رنگ و تصویر زمینه می باشند بصورت خلاصه نوشت :

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

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی background را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : تنظیم فقط رنگ زمینه

امتحان کنید

مثال شماره ۲ : تنظیم رنگ زمینه بهمراه تصویر زمینه

امتحان کنید

مثال شماره ۳ : تنظیم رنگ زمینه بهمراه تصویر زمینه + تنظیم موقعیت قرار گیری تصویر زمینه + فیکس کردن تصویر زمینه

امتحان کنید

Free-Learn

جدول مشخصات ویژگی background در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS3 و CSS1
نحوه استفاده در جاوااسکریپت object.style.background=”red url(bg.jpg) top left no-repeat”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
background ۱٫۰ ۱٫۰ ۳٫۵ ۱٫۰ ۴٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی background در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
background-color برای تنظیم رنگ زمینه.
background-image برای تنظیم یک یا چندین تصویر برای زمینه.
background-position برای تنظیم موقعیت قرار گیری تصویر زمینه.
background-size برای تنظیم اندازه یا سایز تصویر زمینه. (CSS3)
background-repeat مشخص میکند که آیا تصویر زمینه تکرار شود یا خیر.
background-origin نقطه / موقعیت پخش شدن یا شروع تصویر زمینه را مشخص میکند. (CSS3)
background-clip مشخص میکند که رنگ یا تصویر زمینه تا چقدر در یک عنصر گسترش یابد. (CSS3)
background-attachment مشخص میکند که تصویر زمینه فیکس باشد
یا با اسکرول کردن کاربر تصویر هم اسکرول شود.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب