درس ششم : پسزمینه در CSS
پسزمینه در CSS
ویژگیهای پسزمینه در CSS برای تعریف افکتهای پسزمینه برای عناصر استفاده میشوند.
انواع ویژگیهای پسزمینه:
background-color(رنگ پسزمینه)background-image(تصویر پسزمینه)background-repeat(تکرار تصویر)background-attachment(ضمیمه کردن تصویر)background-position(موقعیت تصویر)background(ویژگی مختصرنویسی)
۱. تصویر پسزمینه (CSS background-image)
این ویژگی یک تصویر را به عنوان پسزمینه یک عنصر تنظیم میکند. به طور پیشفرض، تصویر تکرار میشود تا کل عنصر را بپوشاند.
background-image: url(“paper.gif”);
}
۲. تکرار پسزمینه (background-repeat)
شما میتوانید تعیین کنید که تصویر در جهت افقی، عمودی یا اصلاً تکرار نشود.
تکرار فقط در جهت افقی (repeat-x):
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}
عدم تکرار (no-repeat):
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
}
۳. موقعیت پسزمینه (background-position)
برای تعیین محل قرارگیری تصویر از این ویژگی استفاده میشود (مثلاً بالا سمت راست):
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}
خروجی شبیهسازی شده:
۴. ضمیمه پسزمینه (background-attachment)
این ویژگی مشخص میکند که آیا تصویر پسزمینه با بقیه صفحه اسکرول شود یا ثابت (Fixed) بماند.
- fixed: تصویر با اسکرول کردن صفحه حرکت نمیکند.
- scroll: تصویر همراه با محتوا اسکرول میشود (پیشفرض).
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
۵. ویژگی مختصرنویسی (Shorthand Property)
برای کوتاهتر کردن کد، میتوانید تمام ویژگیهای بالا را در یک خط با نام background بنویسید:
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
ترتیب مقادیر در حالت مختصرنویسی به این صورت است:
background-color | background-image | background-repeat | background-attachment | background-position
پایان فصل ششم
در درس بعدی به مبحث «حاشیهها در CSS» میپردازیم.