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+

 

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

 
Önceki yazıyı okuyun:
CSS ile Hazırlanmış Roket Animasyonu

Javascript kullanmadan sadece CSS ile yapılmış roket animasyonu. See the Pen CSS only animated rocket by eva (@eva_trostlos) on CodePen.

Kapat