برای کوتاهتر کردن کد، میتوان تمام ویژگیهای مربوط به پسزمینه را بهصورت یکجا و در قالب یک ویژگی واحد تعریف کرد. این روش در CSS بهعنوان ویژگی خلاصهشده (shorthand property) شناخته میشود.
مثال: نوشتن ویژگیها بهصورت جداگانه
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
مثال: استفاده از ویژگی خلاصهشده background
با استفاده از ویژگی background میتوان تمام ویژگیهای بالا را در یک خط نوشت:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
ترتیب مقادیر در ویژگی خلاصهشده
هنگام استفاده از ویژگی background، ترتیب مقادیر باید بهصورت زیر باشد:
background-color(رنگ پسزمینه)background-image(تصویر پسزمینه)background-position(موقعیت تصویر)background-size(اندازه تصویر)background-repeat(نحوه تکرار تصویر)background-origin(مبدا موقعیت تصویر)background-clip(ناحیهای که تصویر در آن رسم میشود)background-attachment(ثابت یا متحرک بودن تصویر)
نکته: اگر برخی از مقادیر را مشخص نکنید، مشکلی پیش نمیآید؛ فقط کافیست مقادیر موجود را به ترتیب بالا قرار دهید.
جدول کامل ویژگیهای پسزمینه در CSS
| ویژگی | توضیح |
|---|---|
background | تمام ویژگیهای پسزمینه را در یک اعلان واحد تنظیم میکند |
background-attachment | مشخص میکند که تصویر پسزمینه ثابت باشد یا همراه با صفحه اسکرول شود |
background-clip | ناحیهای را مشخص میکند که تصویر پسزمینه در آن رسم میشود |
background-color | رنگ پسزمینه یک عنصر را تنظیم میکند |
background-image | تصویری را بهعنوان پسزمینه عنصر تنظیم میکند |
background-origin | محل شروع موقعیت تصویر پسزمینه را مشخص میکند |
background-position | محل قرارگیری تصویر پسزمینه را تعیین میکند |
background-repeat | نحوه تکرار تصویر پسزمینه را مشخص میکند |
background-size | اندازه تصویر پسزمینه را مشخص میکند |