ویژگی های Backgrounds در css

خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم
با کد های آن دست یافتنی است.
در این مطلب چگونگی ایجاد پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر ، توسط ویژگی های color، image، repeat، attachment و position را بررسی میکنیم.
تا بتوانیداز آنها به طور سفارشی بهره ببرید.
شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:

background در css

توضیحات:
*در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
*در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
*برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
*در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
*در کد بالا ما تصویری با ابعاد ۵ پیکسل در ۵ پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
*رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت ۰۶۹# مشخص است، تنظیم کرده ایم.
*background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
*background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
در ادامه ، بررسی جزئی تر هر یک از عناصر را میتوانید دنبال کنید.

عنصر background:
این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:

.my-div-background{
background:#093;
}

برای حالت های شفاف می توان از مقادیر transparent استفاده کرد.

عنصر background-image:
آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:

.my-div-background{
background-image:url(bgimage.jpg);
}

برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.

عنصر background-attachment:
background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):

.my-div-background{
background-attachment:fixed;
}
مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.

عنصر background-position:
background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:

.my-div-background{
background-position:bottom;
}
.my-div-background2{
background-position:bottom left;
}

مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).

عنصر background-repeat:
این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:

.my-div-background2{
background-repeat:repeat-y;
}
مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.