پس زمینه
برای اثرگذاری روی پس زمینه ها خواص زیر را به کار می بریم:
- Background-color
- Background-image
- Background-repeat
- Background-attachment
- Background-position
رنگ پس زمینه
خاصیت background-colorرنگ پس زمینه یک عنصر را مشخص می کند.
رنگ پس زمینه یک صفحه در انتخابگرbody تعریف می گردد:
Body {
Background-color: #b0c4de;
}
درCss رنگ ها به صورت زیر مشخص می شوند:
- مقدار هگزاد سیمال (Hex) مثل:#ff0000
- مقدار RGBمثل: (255,0,0)rgb
- نام رنگ مثل:red
البته در مقدار رنگ دهی درCss انواع دیگری هم به کار می رود.
تصویر پس زمینه
خاصیت background-image تصویر پس زمینه یک عنصر را مشخص می کند. به صورت پیش فرض، تصویر تا
اندازه ای که کل عنصر را پوشش دهد تکرار می شود. برای نمونه می توان به مثال زیر اشاره کرد:
Body {
Background-image: url(/ “paper.gif” ); }
از تصاویری استفاده نکنید که رنگی نزدیک به رنگ متن صفحه داشته باشد، چون اینکار خوانایی متن توسط
کاربر را پایین می آورد.
تصویر پس زمینه- تکرار عمودی و تکرار افقی
به طور پیش فرض خاصیت background-imageتصویر را افقی وعمودی تکرار می کند. بعضی تصاویر باید به صورت
افقی و برخی دیگر باید به صورت عمودی تکرار شوند.
مثلا برای تکرار تصاویر به صورت افقی مقدارrepeat-x را به خاصیت background-repeatمی دهیم.مثال:
Body {
Background-image: url(/“gradient.png”);
Background-repeat: repeat-x;
}
در کد بالا، تصویر مورد نظر در کل عرض صفحه تکرار می شود. برای تکرار تصویر به صورت عمودی از repeat-y
استفاده می کنیم. خاصیت background-repeatمی تواند مقدار no-repeat را بپذیرد که در این صورت تصویر
دیگر تکرار نمی شود:
Body {
Background-image: url(/“img-tree.png”);
Background-repeat: no-repeat;
}
همچنین می توان مکان این تصویر را مشخص کرد، به طور مثال کد زیر مکان تصویر پس زمینه را بالا و راست
تعیین می کند:
Body {
Background-image: url(/“img-tree.png”);
Background-repeat: no-repeat;
Background-position: right top;
}
خلاصه سازی کد
برای اینکه خاصیت دهی پس زمینه را خلاصه تر کنیم به صورت زیر مجموع خواص آن را می نویسیم:
Body {
Back ground: #ffffff url(“ img-tree. Png”) no-repeat right top;
}
خاصیت پس زمینه دارای5 مقدار می باشد که هر یک نماینده ای
از مقدار یک خاصیت می باشد.
