Adding a background to logo

I’m trying to make my logo stand out much more as my header is quite a bright image.

I have added a background to my logo in CSS but the box doesn’t go from edge to edge of the header photo so it looks a bit naff.

Does anyone know 1. how to make it full width of the photo & 2. add a gradient to the background, so it fades from black to reveal the header photo.

I’ve edited the photo itself in photoshop which works but when you view the site on mobile it shrinks the header photo so the black I added is no longer visible.

I’m using Flymag theme

Thanks