Adding a background to header text

  • Author
    Posts
  • #131426
    bpham422
    Member

    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: (visible only to logged in users)

    #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
    bpham422
    Member
    Original poster

    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
    bpham422
    Member
    Original poster

    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
    bpham422
    Member
    Original poster

    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

  • The topic ‘Adding a background to header text’ is closed to new replies.