CSS3 background özellikleri (background-size, background-origin, background-clip)

background-size:

Aldığı değerler : cover, contain, sayısal değer

1. Cover

css3‘in cover özelliği bizi ortalama 20 satırlık jquery kodundan kurtarıyor arkadaşlar. (Birkaç arkaplan eklentisi yaptığım için biliyorum)

Arkaplan olarak verdiğiniz resime background-size:cover dediğinizde o full ekran oluyor ve resmin boyutlarına göre resmi oranlıyor.

Kullanım şekli :

 

Codepen

2. Contain

Tarayıcı boyuna göre resmi tam boy olarak gösteriyor ve tam boyu kesmeden kendine göre oranlıyor.

Kullanım şekli :

Codepen

3. Sayısal değer

Resmin width ve height değerini giriyoruz, bu width ve height değerine göre resmi

Tecrübe : Arkadaşlar büyük arkaplanlı sitelerimizde iphone telefonlar için resim boyutunu background-size’e vermek gerekiyor yoksa background tam olarak oturmuyor

Kullanım şekli :

Codepen

background-origin:

Background-image’in konumunu belirler.

Aldığı değerler :

1. border-box : Border’in başlangıcından background-image’i başlatıyor.
2. content-box : İçeriğimizin başladığı yerden background-image’i başlatıyor.
3. padding-box : Padding değerimizin başladığı yerden background-image’i başlatıyor.

Kullanım şekilleri :

 

Codepen

background-clip:

Bu özelliği anlatacak kadar kavrayamadım ama bunun özelliği belirlediğimiz alana göre resimi kırpma işlemi yapıyor.

Benden daha iyi anlatacak bir kaynak : http://fatihhayrioglu.com/css3-background-origin-ve-background-clip-ozellikleri/

background-image:

background-image anlatımını burada anlattım.

Kaynak :

http://css-tricks.com/perfect-full-page-background-image/
http://fatihhayrioglu.com/css3-background-size-ozelligi/
http://www.css3.info/preview/background-size/
http://fatihhayrioglu.com/css3-background-origin-ve-background-clip-ozellikleri/

“CSS3 background özellikleri (background-size, background-origin, background-clip)” üzerine 3 yorum

  1. Merhaba,
    Bloğumda slider’da yer alan görsellerin bazısı net değil. Ben de cover olan değeri sizin dediiniz gibi contain ile değiştirdim ama pek bir şey değişmedi. Bu ayar görsel netliğine etki eder mi?

    Teşekkürler

Bir yanıt yazın

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