Loading spinner wrongly taking too much space - html

Question

I wish to use a 197px X 196px spinner on top of a fullscreen background-image but with the code I am using, it takes the whole space (enormous!).
I just would like it to be at the center of the page with its "normal size", that is to say 197px X 196px
Here is a Demo: https://codepen.io/anon/pen/boqzNb
HTML
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center;background-size:cover;"></div>
CSS
#toto {
width: 100%;
height: 100%;
position: absolute;
}
I know the issue comes from the property 'cover' but in the project
I need the property background-size absolutely. On the 'click' event on a certain button, I inject via javascript into the URL a real image and I use background-property 'cover' so that it creates a fullscreen background image. Can I keep cover and 100% width & height for the final real image but restrict the size of the loader while it appears (loader disappears when the final image has fully loaded) ?
It should eb possible to have a 100% width and height background image and until it finishes to load a loading gif with a full REd color in the background and a loading gif on top of it but that this loading gif does not take the whole screen (quite ugly).
How can I manage this?

Answer 1

The width and height are percentages of the container of the element. If you specify width: 100%, you're asking for the element to take up 100% of the container, so yes, it's going to be the whole screen.
If you want the width to be 197 pixels, use width: 197px. The same goes for height.

Answer 2

Use next code:
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center center no-repeat;"></div>
it will centered you preloader and no repeat and there is no background-size property.

Answer 3

Since you know the width and height of the spinner, give it these settings to have it in original size and center inside its container (which in the codepen is the window):
#toto {
width: 196px;
height: 196px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
https://codepen.io/anon/pen/zEZeLj

Answer 4

The html
<div id="toto" class=""></div>
The css you need to set background style and keep div size is
#toto {
width: 100%;
height: 100%;
position: absolute;
background-color:#DF2943;
background-image:
url('path/spinner_animation02.gif');
background-size: 195px 195px;
background-repeat:no-repeat;
background-position:center;
}
Hope it helps!