Adding a background to header text

  • Author
    Posts
  • #131426

    Hi there,

    I’m having trouble figuring out how to add a semi-transparent background box to the header text at the top on my home page to make it more readable against the background.

    The text I’m trying to add a box behind says “Celebrate. Enjoy. Share.”

    Can anyone help me with this?

    The blog I need help with is celeboxphotobooth.com.

    #131479

    emilysuesrq
    Theme Author

    Hello!

    Your site looks great, by the way… we will add it to our showcase!

    To add a transparent card to this text area, add the following CSS, then adjust the transparency to your liking by changing the last number (the 0.5):

    .featured-page .information {
     background-color: rgba(255,255,255,0.5);
    }

    I hope that helps, let me know if you have any further questions. Thanks!

    Emily

    #131510

    Hi Emily,

    Thanks for the help!

    How would I change the font color from white to black? I’d like to change the font to black so that we’d be able to see it much better against the transparent background.

    #131534

    emilysuesrq
    Theme Author

    You’re welcome! To change the font color for that card to black, add the following:

    .featured-page .information h2 {
        color: black;
    }

    I hope that helps!

    Emily

    #131698

    I appreciate the help, Emily!

    How do I add the transparent background to the header text on the other pages? For now, the background to the header text is only showing on the home page.

    #131739

    emilysuesrq
    Theme Author

    You’re most welcome! Please try adding the following code:

    .headline.img-headline {
     background: rgba(0, 0, 0, 0.5);
     padding: 24px 36px;
     width: auto;
     left: 50%;
     -webkit-transform: translateX(-50%) translateY(-50%);
     -ms-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
    }

    I hope that helps!

    Emily

    #131742

    Thanks, Emily!

    The background has been added to the header text on the pages other than the home page, but it seems to have made the text smaller. Is there a way to keep the size of the text the same as the home page?

    I appreciate your help!

    #131767

    emilysuesrq
    Theme Author

    Please add this:

    .headline.img-headline {
       font-size: 5em !important;
    }

    Thanks,
    Emily

You must be logged in to reply to this topic.