صفات پس زمینه در CSS برای تعریف افكت های پس زمینه عناصر استفاده می شود.
 

صفات پس زمینه CSS :

background-color
background-image
background-repeatbackground-attachmentbackground-position

رنگ پس زمینه

background-color رنگ پس زمینه  یك عنصر را مشخص می كند. رنگ پس زمینه صفحه بصورت زیر تنظیم می شود.

مثال :

body {
    background-color: lightblue;
}

h1 {
    background-color: red;
}

div {
    background-color: lightgray;
}

p {
    background-color: orange;
}

تصویر پس زمینه

background-image تصویری به عنوان پس زمینه را برای عناصر HTML مشخص می كند. بطور پیش فرض تصویر تكرار می شود تا تمام سطح عنصر رو بپوشاند. تصویر پس زمینه را می توان به طریق زیر تنظیم كرد :

مثال :

body {
    background-image: url("paper.gif");
}

body {
    background-image: url("bgdesert.jpg");
}

تكرار تصویر پس زمینه - عمودی یا افقی ؟؟

بطور پیش فرض ،‌تكرار تصویر در پس زمینه در هر دو حالت عمودی و افقی اتفاق می افتد. برخی تصاویر را می خواهیم فقط افقی یا فقط عمودی تكرار كنیم.

مثال :

body {
    background-image: url("gradient_bg.png");
}

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

تنظیم موقعیت تصویر و عدم تكرار

برای نشان دادن تصویر بدون تكرار از صفت background-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;
}

موقعیت ثابت تصویر پس زمینه

برای تنظیم موقعیت تصویر بصورت ثابت (به هنگام اسكرول صفحه ،‌تصویر همچنان در همان موقعیت نمایش داده شود) از صفت background-attachment استفاده می كنیم.

مثال :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

كوتاه نویسی كد ها

برای كوتاه كردن كد ها امكان مشخص كردن صفات در یك صفت وجود دارد. به این صفت مختصرشده (shorthand)می گویند. صفت مختصرشده برای پس زمینه background می باشد.

مثال:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}