برای تغییر ظاهر پس زمینه از صفت background استفاده می کنیم .
جاداره اینجا به یک موضوع مهم و کاربردی اشاره کنم و آن هم استفاده از بعضی از صفاتcss هست که مرورگر اکسپلورر از آن پشتیبانی نمی کنه و همیشه برای طراح های وب سایت دردسر ساز هست . به همین دلیل من برای هر صفت مرورگرهای پشتیبانی کننده را می نویسم .
مرورگرهای پشتیبانی کننده : تمام مرورگرها
صفت Background :
یک صفت کاربردی بوده که برای تنظیم تمام صفات از آن استفاده می شود .
این صفت دارای مقدارهای
می باشد که هر کدام از مقدارها نیز دارای ویژگیهای خاص خود می باشند که به ترتیب توضیح میدهم و یک مثال برای شما در یک صفحه جدید تا دقیق تغییرات را احساس کنید.
اولین مقدار background-color بود که دارای ویژگی مقدار رنگ به صورت عددی یا هگزاد دیسمال می باشد .من صفحه html را ایجاد کردم برای اینکه تغییرات را مشاهده کنید روی دموهای ایجاد شده کلیک تا با تغییرات ویژگیها بیشتر آشنا بشوید .
صفت background-image
یک تصویر برای پس زمینه مشخص می کند
URL تابعی است که مسیر تصویر پس زمینه را مشخص می کند.
صفت background-attachment
این صفت برای تصویر زمینه بکار می رود . مشخص می کند تصویر چه حالتی داشته باشد یا ثابت یا اسکرول. اگر در حالت اسکرول باشد با استفاده از اسکرول ها تصویر زمینه قادر به حرکت است اما در حالت Fixed قادر به حرکت نمی باشد .
صفت background-position
این صفت موقعیت تصویر زمینه را مشخص می کند. اگر مختصات از 0% .0% استفاده کنید موقعیت تصویر در بالا و سمت چپ قرار می گیرد و اگر مختصات 100% . 100% استفاده کنید موقعیت را در پایین و سمت راست قرار می دهد. اگر از یک مختصات استفاده کنید دیگری 50% خواهد بود.
صفت background-position دارای مقدارهای زیر می باشددارای مقدارهای زیر می باشد
منبع: learning.asarayan.com
جاداره اینجا به یک موضوع مهم و کاربردی اشاره کنم و آن هم استفاده از بعضی از صفاتcss هست که مرورگر اکسپلورر از آن پشتیبانی نمی کنه و همیشه برای طراح های وب سایت دردسر ساز هست . به همین دلیل من برای هر صفت مرورگرهای پشتیبانی کننده را می نویسم .
مرورگرهای پشتیبانی کننده : تمام مرورگرها
صفت Background :
یک صفت کاربردی بوده که برای تنظیم تمام صفات از آن استفاده می شود .
این صفت دارای مقدارهای
HTML:
background-color :background-image :background- repeat :background-attachment :background- position :می باشد که هر کدام از مقدارها نیز دارای ویژگیهای خاص خود می باشند که به ترتیب توضیح میدهم و یک مثال برای شما در یک صفحه جدید تا دقیق تغییرات را احساس کنید.
اولین مقدار background-color بود که دارای ویژگی مقدار رنگ به صورت عددی یا هگزاد دیسمال می باشد .من صفحه html را ایجاد کردم برای اینکه تغییرات را مشاهده کنید روی دموهای ایجاد شده کلیک تا با تغییرات ویژگیها بیشتر آشنا بشوید .
HTML:
body{background-color : #000000 ;}صفت background-image
یک تصویر برای پس زمینه مشخص می کند
URL تابعی است که مسیر تصویر پس زمینه را مشخص می کند.
HTML:
body{background-image : url (logo2.jpg) ;}صفت background-repeat
نحوه تکرار شدن تصویر را مشخص می کند .
مقدار repeat : به صورت افقی و عمودی تصویر را تکرار می کند .
مقدار repeat-x : به صورت افقی تصویر را تکرار می کند.
مقدارrepeat-y: به صورت عمودی تصویر را تکرار می کند .
no-repeat : تصویر بدون تکرار نمایش داده می شود .
مقدار repeat : به صورت افقی و عمودی تصویر را تکرار می کند .
مقدار repeat-x : به صورت افقی تصویر را تکرار می کند.
مقدارrepeat-y: به صورت عمودی تصویر را تکرار می کند .
no-repeat : تصویر بدون تکرار نمایش داده می شود .
HTML:
body{background-image : url (logo2.jpg);background-repeat : repeat-x ;}صفت background-attachment
این صفت برای تصویر زمینه بکار می رود . مشخص می کند تصویر چه حالتی داشته باشد یا ثابت یا اسکرول. اگر در حالت اسکرول باشد با استفاده از اسکرول ها تصویر زمینه قادر به حرکت است اما در حالت Fixed قادر به حرکت نمی باشد .
HTML:
body{background-attachment :scroll ;}صفت background-position
این صفت موقعیت تصویر زمینه را مشخص می کند. اگر مختصات از 0% .0% استفاده کنید موقعیت تصویر در بالا و سمت چپ قرار می گیرد و اگر مختصات 100% . 100% استفاده کنید موقعیت را در پایین و سمت راست قرار می دهد. اگر از یک مختصات استفاده کنید دیگری 50% خواهد بود.
صفت background-position دارای مقدارهای زیر می باشددارای مقدارهای زیر می باشد
HTML:
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx-% y-%body{background-image : url (logo2.jpg);background-position : top left ;}منبع: learning.asarayan.com
