CSS3 ve Çoklu Arkaplan (Multiple Background)

css3-multiple-background

CSS3 ile birlikte gelen yeniliklerden biride, body’e yada sitenizin arka planına birden fazla arka plan eklemek. Artık CSS3 sayesinde background tanımında birden fazla görsel tanımlamanıza izin veriyor. Birden fazla görsel tanımlamak için aşağıda ki örneği kullanabilirsiniz.

{
background: url(image_1.jpg) top left no-repeat,
url(image_2.gif) top right no-repeat,
url(image_2.png) bottom center no-repeat;
}

Background kodu eklediğiniz sıraya göre en üst katmandan en alt katmana doğru gitmektedir. Yani en üste olmasını istediğiniz arka planı ilk sıraya eklemelisiniz.

Bu yöntem sayesinde birden fazla arka plan kullanabilir, katman katman arka planlar ekleyebilirsiniz.

Masaüstü tarayıcı desteği: Chrome 2.0+ | IE 9+ | Firefox 3.6+
Mobil tarayıcı desteği: Android 2.1+ | Safari 3.2+ | Chrome 36+