You can try something like this:

.XenBase #logoBlock {
background: rgba(0, 0, 0, 0) url("@imagePath/xenforo/logo2.png") no-repeat scroll center center / 100% 100%;
.XenBase #logoBlock img {
opacity: 0;

Little different way to approach it. If you could though I'd split the background from the text, then set the logo to the text based image, and then set the code above background to just the background without the text, if that makes sense.
Okay I separated them. I added the exact code above to Extra.css and then put the text/sims based logo in Style Properties > Header and Navigation > Header Logo Image Path but now the text/sims based logo is not showing up at all.
You can center your logo by adding this btw:

.XenBase #logo {
  float: none;
  text-align: center;

Also if you set the path to the same logo for the "mobile logo" you can choose a new height for it to adjust down too.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.