In WordPress, is it possible to use Additional CSS to resize the header background area to accommodate a custom image?

Question

I uploaded a custom image to my WordPress site to use as a header background. I have it displayed using the following CSS:

.main-header-bar {background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;}

This allows the image to stretch the width of the screen even when the screen size changes.

The challenge I need help with is getting the height to adjust along with the width.

I think the issue is the height of the header area is defined by the font size chosen for the site title, the tagline, and the menus. To illustrate, when I move the browser window from a medium sized screen to a large one, my image size increases to match the size of the new monitor, but the font of the title, tagline, and menus remains the same. Because the height is now insufficient to contain the image now that it is wider and taller, it cuts off the bottom of the image.

Is there an elegant way to address this?

For reference, I am using the Astra theme.

Thanks!

UPDATE: I've done some more experimenting. I've discovered that the image is not actually "cut off" per se. The whole thing is there. However, on the larger screen, at the normal 100% zoom, the content of the page is displayed overlapping the image. If I zoom in, the image remains at 100% the width of the page while the title, tagline, menus, and content enlarge. The title expanding pushes the content down and the entire image becomes visible.

What I'd like is for the title and the header to be in sync with one another. Right now the image size is set relative to the screen size (100%), while the text size is set by a font. Is there a way to tie these to things together so there is a consistent appearance?

UPDATE: I think I figured it out, mostly. I'm sure I'm doing something sloppily because I don't quite understand it all. By calculating a font size and using "vw" it makes the font size adjust based on the width of the screen instead of pixels. Since my header image also does that, it lines up (not perfectly, but it works between the screens I'm testing on well enough). Here is the code I added:

html { font-size: calc(0.75em + 0.5vw) }

.site-title {
font-size: calc(7.1vw)}

.site-description {font-size: calc(1.6vw) !important;}

.menu-item {
font-size: calc(1.8vw);}

Answer 1

How about trying it with a media query to satisfy the larger viewport.

    .main-header-bar {
      background-image: url("image url");
      background-repeat: no-repeat;
      background-size: 100%;
    }


    @media only screen and (min-width: 600px) {
      .main-header-bar {
        background-image: url("image url");
        background-repeat: no-repeat;
        background-size: cover;
      }
    }