پس‌زمینه (Background)

تمام ویژگی‌های پس‌زمینه در CSS: رنگ، تصویر، تکرار، موقعیت، اندازه و ثابت کردن

پس‌زمینه در CSS

ویژگی‌های پس‌زمینه (Background) یکی از پرکاربردترین ابزارهای طراحی وب هستند. با آن‌ها می‌توانید رنگ، تصویر، گرادیانت و افکت‌های زیبا روی عناصر ایجاد کنید.

ویژگی‌های پس‌زمینه

ویژگیتوضیح
background-colorرنگ پس‌زمینه
background-imageتصویر پس‌زمینه
background-repeatنحوه تکرار تصویر
background-positionموقعیت تصویر
background-sizeاندازه تصویر
background-attachmentثابت یا متحرک بودن
background-originنقطه شروع پس‌زمینه
background-clipمحصول برش پس‌زمینه
backgroundخلاصه همه ویژگی‌ها (Shorthand)

۱. رنگ پس‌زمینه

div {
        background-color: #3498db;
    }
    
    /* با شفافیت */
    .overlay {
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    /* شفاف */
    .clear {
        background-color: transparent;
    }

۲. تصویر پس‌زمینه

.hero {
        background-image: url("images/hero.jpg");
    }
    
    /* چند تصویر همزمان */
    .multi {
        background-image: url("logo.png"), url("bg.jpg");
    }

۳. تکرار پس‌زمینه (background-repeat)

مقدارتوضیح
repeatتکرار در هر دو جهت (پیش‌فرض)
repeat-xفقط افقی
repeat-yفقط عمودی
no-repeatبدون تکرار
spaceتکرار با فاصله یکنواخت
roundتکرار با تغییر اندازه
.banner {
        background-image: url("pattern.png");
        background-repeat: no-repeat;
    }
    
    .tile {
        background-image: url("tile.png");
        background-repeat: repeat-x;
    }

۴. موقعیت پس‌زمینه (background-position)

موقعیت تصویر را نسبت به عنصر مشخص می‌کند:

/* کلمات کلیدی */
    background-position: top;
    background-position: center;
    background-position: bottom right;
    
    /* درصد */
    background-position: 50% 50%;  /* مرکز */
    background-position: 0% 100%;  /* پایین چپ */
    
    /* پیکسل */
    background-position: 20px 30px;
ترکیبموقعیت
left topبالا چپ
center topبالا وسط
right topبالا راست
left centerوسط چپ
center centerدقیقاً وسط
right centerوسط راست
left bottomپایین چپ
center bottomپایین وسط
right bottomپایین راست

۵. اندازه پس‌زمینه (background-size)

مقدارتوضیح
autoاندازه واقعی تصویر (پیش‌فرض)
coverپر کردن کامل با حفظ نسبت ⭐
containنمایش کامل تصویر با حفظ نسبت
عرض ارتفاعمقادیر دقیق پیکسلی یا درصدی
.hero {
        background-image: url("hero.jpg");
        background-size: cover;     /* پوشش کامل */
    }
    
    .logo {
        background-image: url("logo.png");
        background-size: contain;   /* نمایش کامل */
    }
    
    /* ابعاد دقیق */
    .icon {
        background-size: 50px 50px;
    }

۶. چسبندگی پس‌زمینه (background-attachment)

مقدارتوضیح
scrollبا اسکرول صفحه حرکت می‌کند (پیش‌فرض)
fixedثابت می‌ماند (افکت پارالاکس)
localبا محتوای عنصر اسکرول می‌شود
/* افکت پارالاکس زیبا */
    .parallax {
        background-image: url("landscape.jpg");
        background-attachment: fixed;
        background-size: cover;
        height: 400px;
    }

۷. ناحیه پس‌زمینه (background-origin و clip)

/* نقطه شروع پس‌زمینه */
    background-origin: border-box;   /* از حاشیه */
    background-origin: padding-box;  /* از فاصله داخلی (پیش‌فرض) */
    background-origin: content-box;  /* از محتوا */
    
    /* ناحیه برش */
    background-clip: border-box;     /* تا حاشیه (پیش‌فرض) */
    background-clip: padding-box;    /* تا فاصله داخلی */
    background-clip: content-box;    /* فقط محتوا */
    background-clip: text;           /* روی متن (افکت متن با تصویر) */

ویژگی Shorthand (خلاصه)

می‌توان همه ویژگی‌ها را در یک خط نوشت:

/* جداگانه */
    .hero {
        background-color: #333;
        background-image: url("hero.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }
    
    /* خلاصه (Shorthand) */
    .hero {
        background: #333 url("hero.jpg") no-repeat center / cover fixed;
    }

چند پس‌زمینه (Multiple Backgrounds)

CSS اجازه می‌دهد چند لایه پس‌زمینه داشته باشید — لایه اول بالاترین است:

.layered {
        background:
            url("overlay.png") no-repeat center,     /* لایه بالا */
            linear-gradient(rgba(0,0,0,0.5), transparent), /* لایه وسط */
            url("background.jpg") center/cover;       /* لایه پایین */
    }

گرادیانت به‌عنوان پس‌زمینه

/* خطی */
    .gradient {
        background: linear-gradient(to right, #667eea, #764ba2);
    }
    
    /* شعاعی */
    .radial {
        background: radial-gradient(circle, yellow, red);
    }
    
    /* مخروطی */
    .conic {
        background: conic-gradient(red, yellow, green, red);
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط