CSS Backgrounds
۱. رنگ پسزمینه (Background Color)
برای تعیین رنگ پسزمینه یک عنصر استفاده میشود:
background-color: lightblue;
background-color: #ffcc00;
background-color: rgba(255, 0, 0, 0.5); /* نیمه شفاف */
۲. تصویر پسزمینه (Background Image)
میتوانید یک تصویر به عنوان پسزمینه قرار دهید:
background-image: url(‘image.jpg’);
۳. تکرار تصویر پسزمینه (Background Repeat)
تصویر پسزمینه به طور پیشفرض در هر دو جهت تکرار میشود، اما میتوانید کنترلش کنید:
background-repeat: repeat; /* تکرار در هر دو جهت (پیشفرض) */
background-repeat: no-repeat; /* تکرار نشود */
background-repeat: repeat-x; /* تکرار فقط افقی */
background-repeat: repeat-y; /* تکرار فقط عمودی */
۴. موقعیت تصویر پسزمینه (Background Position)
برای تعیین موقعیت تصویر در داخل عنصر:
background-position: center; /* وسط */
background-position: top right; /* بالا سمت راست */
background-position: 50% 50%; /* وسط با درصد */
۵. اندازه تصویر پسزمینه (Background Size)
میتوانید اندازه تصویر پسزمینه را تنظیم کنید:
background-size: auto; /* اندازه اصلی تصویر */
background-size: cover; /* پر کردن کامل عنصر، احتمال بریدگی */
background-size: contain; /* تمام تصویر داخل عنصر نمایش داده شود */
background-size: 100px 50px; /* عرض و ارتفاع مشخص */
۶. پسزمینه ثابت یا اسکرول شونده (Background Attachment)
مشخص میکند پسزمینه هنگام اسکرول صفحه چه رفتاری داشته باشد:
background-attachment: scroll; /* پیشفرض، با صفحه حرکت میکند */
background-attachment: fixed; /* ثابت و حرکت نمیکند */
۷. ترکیب چند پسزمینه (Multiple Backgrounds)
میتوانید چند تصویر پسزمینه روی هم قرار دهید:
background-image: url(‘image1.png’), url(‘image2.png’);
background-position: left top, right bottom;
background-repeat: no-repeat, repeat;
دیدگاهتان را بنویسید