background-image nedir ? nasıl kullanılır ?

CSS3 background-image yenilikleri

 

 

CSS3 background özellikleri (background-size, background-origin, background-clip) konusunda aceleci davrandığım için

“background-image” olayını anlatmayı unuttum o yüzden bu özelliği başlı başına bir konu olarak anlatıyorum.

Arabirim geliştiriciliği yani halk ağızı ile (psd to css veya front end developer) yapan kişilerin css’den ilk ihtiyaç duyduğu “bir objeye iki farklı arka plan resmi atamak”

Ön izleme :

background-image

Aşağıdaki yaptığım örnekte 3 farklı resmi .kutu isimli bir div’e arkaplan resmi olarak tanımladım ve pozisyonlarını verdim.

 

Css Kodları :

Yukarıda gördüğünüz gibi farklı özellikleri virgül ile ayırıyoruz.
Burada dikkat etmemiz gereken bir konuda 3 farklı arka plan verdiğimiz div’in tek “background-repeat:” değerini “no-repeat” ile tekrarlamasını engelleyebiliyoruz.
İstenildiği takdirde  background-repeat: no-repeat, no-repeat, no-repeat; yazılabilir.

Html Kodları :

 

 

Codepen:

Bu güzel özelliği desteklemeyen tarayıcı her zamanki gibi İnternet Explorer.

IE7 ve IE8 desteklemiyor.

kaynaklar

“background-image nedir ? nasıl kullanılır ?” üzerine 9 yorum

  1. Geçen seneler Mehmet adlı hocamız öğretmişti bu konuyu. Şimdi unuttuğum için sizden öğreniyorum. Bizde mi yaşlanıyoruz ne 😀

  2. tek olarak ekliyordum bende background özelliğini arasıra ihtiyaç oluyordu hiç üzerine düşmemiştim siteyi gezerken gördüm teşekkürler, bundan sonra kullanacağım.

  3. ” yani halk ağızı ile (psd to css veya front end developer)” cok ıyı :))) halk dılınden zaten aramızda hep bunu konusuruz ya..

  4. arkadaşlar notepad++ kullanıyorum yeniyim

    body { backgraund-image: url (“indir.jpg”);}

    komutları bu şekilde kullanıyorum ama resim gelmiyo bana yardımcı olurmusunuz acaba

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir