Main Logo Over Photo Help

I am building a website on the highend template and want the home page to have a large photo with the logo in the middle. The standard page has a header image at the top with text in the middle and I figured out that if I extend the padding of the text box I can make the photo longer. Then I also figured out that I could make the text invisible, so I got the home page to be the photo without the text.

From here I did a work around, where I just used a photo with a logo in the photo (so as if to make it look like the website put the logo on it). See the screenshot below.

The problem with this work around is that the logo doesn’t change size when going to a different screen or mobile version. My goal is to not have the logo in the photo, but loaded in from the website.

Is there a way to put the logo inside the textbox instead of text? Or another way to put the logo on the header without having to bake it into the photo?