Preloader Logo Size

Hello

I have a website with a Sydney theme and I have changed the preloader logo to my own .gif

I have entered the code in my custom CSS:

    .preloader .pre-bounce1, .preloader .pre-bounce2 {
        display: none;
    }
    .preloader .spinner {
        background-image: url( here is my logo path );
      width: 30px;
        height: 30px; 
        background-repeat: no-repeat;
        background-size: contain;
    }

The problem that I have is that the logo is small. I tried to change the width and height from 30 to 330px, but nothing changed.

I would like the logo to be bigger and also to be mobile friendly.

Thank you for your help.

I partially managed to resolve this but it is NOT CENTERED on my mobile phone:

    .preloader .pre-bounce1, .preloader .pre-bounce2 {
        display: none;
    }
    .preloader .spinner {
        background-image: url( here is my logo path );
     position: fixed;
        left: 0px;
        top: 0px;
    	width: 70%;
    height: 70%;
    	z-index: 9999;
        background-repeat: no-repeat;
        background-size: contain;
    }

My site link

Hello there,

Try adding background position this line to center the background image.

 background-position: center center;

See: https://www.w3schools.com/cssref/pr_background-position.asp

Your code would look something like this:

    .preloader .spinner {
      background-image: url( here is my logo path );
      position: fixed;
      left: 0px;
      top: 0px;
      width: 70%;
      height: 70%;
      z-index: 9999;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }

Regards,
Kharis

THANK YOU Kharis, this worked.

My working code now looks like this:

.preloader .pre-bounce1, .preloader .pre-bounce2 {
display: none;
}
.preloader .spinner {
background-image: url(http://ograje-kozar.eu/wp-content/uploads/2019/08/ograje_kozar_logo_load.gif);
width: 60%;
height: 60%;
margin: 0;
position: fixed;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}

If someone else has the same issue. I have made my .gif preloader logo in Photoshop, and added this code to my Additional CSS to change the existing two Sydney loading dots with my own .gif logo.

Best regards