CSS - Background-size not working on jpg extension

Question

.baner {
    background-image: url('ban.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 35%;
    top: 60px;
}

Won't do cover on this background but when I do png image it works and I don't understand why:

.baner {
    background-image: url('ban.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 35%;
    top: 60px;
}

Answer 1

Works perfectly fine for me, maybe you aren't saving the image probably as .jpg or something...

div.one {
    width:100px;
    height:100px;
    background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
div.two {
    width:500px;
    height:500px;
    background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

<div class="one">
    
</div>
<div class="two">
    
</div>