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 :

[html] <div class=”border”>border-box</div>
<div class=”content”>content-box</div>
<div class=”padding”>padding-box</div> [/html]

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/