header design options

I am trying to design a header. I am using an image as the background. From what I understand there is only one widget area on the right side of the header where I can add an image or logo, correct?

So if I want to have an image in this widget, and I also want to add text in the center of the header, then I cannot do this with widgets, right? I have to create a separate header graphic which contains the background image, the overlaid image on the right, and the text in the center.

However if I do it that way, then on smaller screens the header elements would not stack, but shrink and make the header unreadable. Is there a way to design a header with background image, overlaid logo image, and overlaid text as separate elements to enable stacking, or is this not possible?

Right now I left the site title and tagline in there which kind of gives me this effect, but I cannot control the width of the tagline, so this makes it look strange. Any solution?

Here is how my header looks now:
https://staging2.heavenlyheadmassage.com/is-heavenly-head-massage-therapeutic-or-relaxing/