kung439 kung439 - 21 days ago 6
CSS Question

Changing size of a loading gif

I have the code below as loading gif for my webpage but was wondering how I could make the size of the gif smaller? Every time I try to change the size it changes the size of the entire thing and not the gif itself.



$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut('slow', function () {
});
},1000);
})

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="loader"></div>




Answer

Use the background-size propety so:

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size:10%;
}

Working DEMO.

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

P.S. You can also use px,em,..

setTimeout(function() {
  $('.loader').fadeOut('slow', function() {});
}, 1000);
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0);
    background-size:10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="loader"></div>

Comments