همانطور که می دانید با CSS می توانید پس زمینه عناصر صفحه را کنترل کنید. مثلا می توانید با دستور background-color پس زمینه را با یک رنگ پر کنید، یا با دستور background-image یک تصویر را به عنوان پس زمینه قرار دهید یا حتی هر دو مورد را استفاده کنید:

body {
background-color: red;
background-image: url(pattern.png);
}

اینجا یک مثال در این مورد نوشتم که یک فایل SVG را به عنوان تصویر پس زمینه قرار دادم که به صورت data URL به CSS اضافه شده است:

See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen.

این فقط یک تصویر هست که تکرار شده است ولی ما می توانیم از چند تصویر پس زمینه نیز به صورت همزمان در CSS استفاده کنیم. این کار را با جدا کردن مقادیر بوسیله کاما , انجام می دهیم.

body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}

اگر کد بالا را اجرا کنید، image-one.jpg تکرار می شود و کلا image-two.jpg را می پوشاند. اما می توانیم هر کدام را به صورت جداگانه نیز کنترل کنیم.

body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
background-position:
top right, /* this positions the first image */
bottom left; /* this positions the second image */
background-repeat:
no-repeat; /* this applies to both images */
}

می بینید چطور در دستور background-position هم مقادیر با کاما از هم جدا شده اند؟ بدین ترتیب هر مقدار به نوبت به تصویری که در دستور background-image آماده ، اعمال خواهد شد. و می بینید دستور background-repeat که فقط یک مقدار دارد؟ ما می توانیم برای این دستور هم از دو مقدار جدا شده با کاما استفاده کنیم ولی وقتی از یک مقدار استفاده می کنید ، این مقدار به هر دو تصویر اعمال می شود.

اینجا مثال دیگری را می بینید که از ۴ تصویر مجزا در گوشه ها استفاده شده است.

See the Pen Example of multiple backgrounds by Chris Coyier (@chriscoyier) on CodePen.

این خیلی بده که شما نمی تونید تصویر پس زمینه را برخانید یا برعکس کنید، در این صورت می توانستید فقط از یک تصویر به جای ۴ تصویر فعلی استفاده کنید.

See the Pen Flipping Image So You Can Use Just One by Chris Coyier (@chriscoyier) on CodePen.

فقط به چند نکته دقت کنید:

1. تصویری که اول از همه باشد ، روی بقیه تصاویر نمایش داده می شود.
2. Gradient ها هم با دستور background-image اعمال می شوند . بنابراین می توانند بخشی از این داستان باشند. مثلا می توانید یک gradient شفاف را روییک تصویر دیگر بیندازید.

See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.

منبع