Header Logo Scaling

Simply put…

You can either add this to the background properties:

background-size: contain;

This will have the image scale proportionately to consume the available area.

Or you can change the image to NOT be a background image. That will allow you to set more relative dimensions (like a fixed height or width with an auto value on the opposite).

Contain on the background-size will work better without adjustments to the rest of the menu, however.

And yes, you will still need to pad the area unless you want to increase the available dimensions of that container it’s in. Otherwise it’s a sliver (the background image). Alternatively, you could have a set height because then the image would contain to fit.