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 :
|
1 2 |
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed; background-size: cover; |
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 :
|
1 2 |
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed; background-size: contain; |
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 :
|
1 2 3 4 5 6 7 |
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed; background-size: 150px 50px; /* veya background-size: 50% 75%; */ |
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 :
|
1 2 3 |
<div class="border">border-box</div> <div class="content">content-box</div> <div class="padding">padding-box</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { width: 250px; height: 250px; float: left; margin: 20px; padding: 15px; background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') left top no-repeat; border: 50px solid #cd1821; background-size: 280px 280px; text-shadow: 0 0 4px #fff; font-size:18px; font-family:Verdana; } .border {background-origin:border-box;} .content {background-origin:content-box;} .padding {background-origin:padding-box;} |
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/
Yine harika bir paylasim
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
Background-size netlik değil pozisyon yani boyutlandırma işlemleri için kullanılıyor