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