background-size örnekleri

sabit taımlar, auto, yüzde değerleri, cover ve contain

by fatihhayri

HTML

<div id="kutu1">
    background-size:200px 100px;
</div>

<div id="kutu2">
    background-size:50% 100%;
</div>

<div id="kutu3">
    background-size:auto;
</div>

<div id="kutu4">
    background-size:cover;
</div>
<div id="kutu5">
    background-size:contain;
</div>

CSS

div{
        width:250px;
        height:250px;
        background:url("http://www.fatihhayrioglu.com/images/koy_06.jpg") 0 0 no-repeat;
        background-size:200px 100px;
        border:1px solid #000;
        margin-bottom:20px;
        color:#de2020;
        text-shadow:2px 1px 1px #fff;
        font-size:20px;
        padding:10px;                
    }
    
    #kutu1{
        background-size:200px 100px;
    }
    
    #kutu2{
        background-size:50% 100%;
    }
    
    #kutu3{
        background-size:auto;
    }
    
    #kutu4{
        background-size:cover;
    }
    
    #kutu5{
        background-size:contain;
    }