[Resolved] Box around title & tag line in header

[Paul]

I’ve been struggling to put a box around the title text and tagline in the header so that I can put a background color (with transparency) to separate it from the header background image. I added background in CSS (using a child theme) to the DIV “site-branding” which works other than the fact it’s too wide as it is dependent on the padding in the header layout. Reduce this padding too much and it doesn’t scale very well. Preferably I want a box around the title and tagline text that fits that text with a padding of about 20px, as this should not affect the scaling.

Is this possible please?

Thanks in advance.

[Leo]

Hi there,

Can you try something like this?

.site-branding {
    max-width: 700px;
    margin: auto;
    border: 2px solid #fff;
    padding: 20px;
}

[Paul]

Thank you very much!

This achieved exactly what I wanted:

.site-branding {
max-width: 700px;
margin: auto;
background-color:hsla(0,0%,0%,0.35);
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
padding: 20px;
}

[Leo]

No problem 🙂

[Author]

Posts