Semi-transparent text box over header image

  • Resolved fnwp2019

    (@fnwp2019)


    5 years, 7 months ago

    Hi there,

    I am trying to create a semi-transparent white text box to overlay an image in the Header section of my husband’s blog.

    I want the text to display in black, with the image visible through the white text box. I would rather have a box for the text than adjust the opacity of the whole image (the image I want to use will be quite dark).
    (I think it will also need to include the menu items, as I can’t seem to move them below the banner image)

    I can only find a way to change the Additional CSS in WordPress, and I can’t work out how to change the coding within the header itself. I’m not a skilled coder, and I have previously just worked with websites that had an obvious WYSIWYG tool.

    Could someone help me with this?
    I’d be very grateful for any suggestions.

    Many thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    Do you want this to affect just the title and description (aka site branding), or the menu as well?

    For the title and description only, add the following to ADDITIONAL CSS box in Customizer:

    .site-branding {
background-color: #fff;
opacity: 0.5;
padding-left: 10px;
padding-right: 10PX;
}

    Feel free to change the background color, opacity and padding values to your heart’s desire.

    If you want this to affect the menu as well, use the following instead: 

    .site-header .tg-header-container {
background-color: #fff;
opacity: 0.5;
}

    (Here we don’t need the paddings because there’s ample empty space around the container already)

    If you want to apply this to the entire header, the safest class to target would be tg-site-header-bottom. Use:

    .tg-site-header-bottom {
background-color: #fff;
opacity: 0.5;
}

    And you may want to remove the remnant image at the bottom with this:

    .tg-site-header {
padding-bottom: 0px;
}

    Good luck!

    Thread Starter fnwp2019

    (@fnwp2019)

    Hi George,

    Thank you SO much for your help! I have used the second solution you provided (to include the menu) and it has worked perfectly!

    Thank you for taking the time to help me with this!

    I’m glad I could be of help.

    By the way, here’s one more low-hanging fruit to fix on your website.

    All your inner pages are using the addresses beginning with https://just2001.temp.domains/~corylove/, instead of the https://corylovesbeer.com/

    To fix this, go to SETTINGS => GENERAL, and change both WordPress Address (URL) and Site Address (URL) to https://corylovesbeer.com (take care to enter the correct address, as a mistake could break the site!)

    Good luck!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Semi-transparent text box over header image’ is closed to new replies.