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

13-06-2013, 11:32:25

#1

AycanB

Kimlik doğrulama veya yönetimden onay bekliyor.
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 :
```
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed;
background-size: cover;
```
// Ön izleme // Codopen

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 :
```
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed;
background-size: contain;
```
// Ön izleme // 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 :
```
background: url('http://calismalar.aycan.net/degisenArkaPlan/kutuphane/resim/golden.jpg') center center fixed;
background-size: 150px 50px;
/* veya
 
background-size: 50% 75%;
 
*/
```
// Ön izleme // 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 :
```
<div class="border">border-box</div>
<div class="content">content-box</div>
<div class="padding">padding-box</div>
```
```
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;}
```
// Ön izleme // Codepen

Kaynaklar :
http://www.aycan.net/css3-background...ckground-clip/
13-06-2013, 11:37:37

#2

EA

teşekkürler aycan çok güzel bir kaynak olmuş