CSS: ایجاد یک بکگراند با چند عکس multiple background images

سی اس اسیکی از تکنینک ها برای ساختن صفحات وب جذاب استفاده از بکگراند با تصاویر و یا ایجاد یک بکگراند با چند عکس است که کمک فراوانی به طراح برای پیاده سازی طرح خود میکند. در این پست میخواهیم بیان کنیم که چطور میشود یک بکگراند با چند عکس ایجاد کرد.

برای مشاهده متن کامل پست ایجاد یک بکگراند با چند عکس در سی اس اس به ادامه مطلب رجوع کنید.

ایجاد یک بکگراند با چند عکس در سی اس اس multiple background images in css

دراین پست ابتدا میخواهیم به توضیح مشخصه بکگراند (Background Property) و گزینه های موجود برای آن بپردازیم. و سپس بگوییم که چطور میشود چند تصویر را همزمان در یک بکگراند به کار برد.

 مشخصه بکگراند در سی اس اس

مشخصه

توضیح

نسخه CSS

background

مشخص کردن تمام تنضیمات مربوط به بکگراند در یک تعریف

1

background-attachment

مشخص کردن ثابت بودن و یا متحرک بودن تصویر پس زمینه در صورت وجود

1

background-color

مشخص کردن رنگ بکگراند یک عنصر

1

background-image

مشخص کردن تصویر برای بکگراند یک عنصر

1

background-position

مشخص کردن مکان شروع برای تصویر بکگراند یک عنصر

1

background-repeat

مشخص کردن چگونگی تکرار یک تصویر در بکگراند

1

background-clip

مشخص کردن یک ناحیه خاص از یک عنصر برای داشتن بکگراند موردنظر

3

background-origin

مشخص کردن یک ناحیه خاص برای تصویر بکگراند

3

background-size

مشخص کردن اندازه تصویر بکگراند

3

برای گرفتن اطلاعات بیشتر و یا مشاهده نمونه کد، بر روی هر یک از مشخصه ها کلیک کنید

 ایجاد یک بکگراند با چند عکس در سی اس اس

اما در CSS3 این اجازه به طراح داده شده است که بتواند برای بکگراند عنصر خود از چندین تصویر به صورت همزمان استفاده نماید. برای این کار کافیست تا طراح تصاویر مورد نظر خود را به بکگراند اضافه کرده و برای هرکدام محل و مکان موردنظر را تعیین نماید.

به مثال زیر دقت کنید:

body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

در این کد، ما برای بکگراند از دو تصویر زیر استفاده کردیم:

بکگراند با چند عکس بکگراند با چند عکسحاصل به صورت زیر درخواهد آمد

بکگراند با چند عکس