یکی از قابلیت های بسیار کاربردی در سی اس اس امکان اختصاص بیش از یک
تصویر برای background-image است. در واقع با استفاده از این قابلیت می
توان چیزهای جذابی من جمله بنرهایی که از چندین عکس تشکیل شده اند طراحی
نمود.
برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:
1
2
3
4
5
6
7
8
9
10
11
Netshahr
Multiple Background Image
همانطور که در کد فوق می بینیم، داخل تگ یک تگ پاراگراف
حاوی عبارت Multiple Background Image ایجاد کرده ایم. حال با استفاده از
کدهای سی اس اس علاوه بر اختصاص اندازه و رنگ به این تگ، قصد داریم تا دو
عکس هم روی آن قرار دهیم. برای این منظور، کدهای سی اس اس زیر را وارد
ویرایشگر متن خود می کنیم:
1
2
3
4
5
6
7
p {
width: 450px;
height: 450px;
background-color: #9cf;
background-image: url(../images/facebookIcon.png),url(../images/bird.jpg);
background-repeat:no-repeat;
}
همانطور که در کد فوق می بینیم، برای background-image دو url در نظر
گرفته ایم که بوسیله یک کاما از یکدیگر جدا شده اند. به خاطر داشته باشیم
که url یی که اول نوشته شود به منزله تصویری خواهد بود که روی تصویر زیرین
نمایش داده خواهد شد. همانطور که مشخص است url دوم هم مربوطه به عکسی است
که زیر عکس بالایی قرار می گیرد. می بینیم که فایل اول فایلی با پسوند png
است که مربوط به آیکان فیسبوک است و فایل دوم که در پس زمینه عکس قبل قرار
خواهد گرفت یک عکس با پسوند jpg است تحت عنوان bird که مربوط به عکس یک
طوطی می باشد. حال پس از ذخیره کردن هر دو فایل سی اس اس (CSS) و اچ تی ام
ال (HTML) اقدام به اجرای صفحه در یک مرورگر می کنیم:
همانطور که در تصویر فوق می بینیم، عکس مربوط به طوطی در پس زمینه قرار
گرفته و عکس مربوط به فیسبوک هم روی آن قرار گرفته است. حال فرض کنیم که با
استفاده از دستور background-repeat قصد داریم تا عکس مربوط به فیسبوک را
در جهت محور افقی تکرار کنیم. برای این منظور کدهای فوق را به صورت زیر
بازنویسی می کنیم:
1
2
3
4
5
6
7
p {
width: 450px;
height: 450px;
background-color: #9cf;
background-image: url(../images/facebookIcon.png),url(../images/bird.jpg);
background-repeat:repeat-x,no-repeat;
}
همانطور که می بینیم برای background-repeat دو مقدار در نظر گرفته ایم
که مقدار یا Value اول مربوط به تصویر اول یا همان لوگوی فیسبوک بوده و
مقدار دوم هم برای تصویر مربوط به طوطی می باشد. حال مجدد مرورگر خود را به
روز رسانی می کنیم:
همانطور که در تصویر فوق مشاهده می شود، لوگوی فیسبوک در جهت محور افقی
تکرار شده است. همواره به خاطر داشته باشیم که اگر فقط یک Value برای
Background-repeat در نظر بگیریم، این Value به هر دو عکس و یا هر تعداد
عکسی که در نظر گرفته باشیم اختصاص می یابد.
علاوه بر این می توان از
دستور background-position هم استفاده کرد به طوری که با تغییر کد فوق به
صورت زیر می توان جایگاه تصاویر را نیز روی یکدیگر تنظیم نمود:
1
2
3
4
5
6
7
8
p {
width: 450px;
height: 450px;
background-color: #9cf;
background-image: url(../images/facebookIcon.png), url(../images/bird.jpg);
background-repeat: no-repeat;
background-position: left center, 0 0;
}
همانطور که در کد فوق می بینیم به عنوان Value مرتبط با
background-position ابتدا left center را در نظر گرفته که مربوط به تصویر
لوگوی فیسبوک است سپس یک کاما قرار داده و این بار برای مشخص سازی جایگاه
تصویر مربوط به طوطی از عدد استفاده می کنیم و از آنجا که می خواهیم این
تصویر به صورت پیش فرض باشد اعداد 0 0 را در نظر می گیریم و از آنجا که در
سی اس اس برای مقدار صفر نیازی به نوشتن px یا em و غیره نیست، کد را به
بدون نوشتن px به اتمام می رسانیم.
