Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
scottmcelroy

How do I add text background to text in a banner?

Question

I have a banner image with description text & button on top of it. I'd like to add background to the description text to make it more readable.

I've been using this CSS below, but to no avail. Please advise - thanks!

Edited by scottmcelroy
Initial Revision

Share this post


Link to post

18 answers to this question

Recommended Posts

  • 0

@tuanphan Forgive me, it's 'Not linked' as the Education index page, beneath the Home index. Site is now public, are you able to see the Not Linked section?

Thanks for your time, Tuanphan.

Share this post


Link to post
  • 0

@scottmcelroy Add to Home > Design > Custom CSS


/* Come to Grow */
.desc-wrapper p:first-child {
   background: #000;
}
/* Come to connect... */
.desc-wrapper p:nth-child(10n+2) {
   background: #000;
}
/* Remove spacing between comet to grow and connect */
.desc-wrapper p:first-child {
   margin-bottom: 0 !important;
}
.desc-wrapper p:nth-child(10n+2) {
   margin-top: 0 !important;
}



 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

Thanks, @tuanphan. Clearly making progress, thank you!

If you check now though, you can see that the .desc-wrapper extends beyond the copy (it should be just behind the text obviously) and I'd love to be able to adjust the opacity as well.

Please advise - thank you!

Share this post


Link to post
  • 0

@scottmcelroy You can usebackground: rgba(227,224,215,0.5);0.5 is opacity (0 --> 1)

e3e0d7 = rgb(227,224,215)


.desc-wrapper p:nth-child(10n+2), .desc-wrapper p:first-child {
   display: inline-block;
}
/* Remove spacing between p1 and p2 */
.desc-wrapper p:nth-child(10n+2) {
   margin-top: -1px !important;
}





Edited by tuanphan
Initial Revision

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

@scottmcelroy All code


/* Come to Grow */
.desc-wrapper p:first-child {
    background: rgba(227,224,215,0.5);
   display: inline-block;
}
/* Come to connect... */
.desc-wrapper p:nth-child(10n+2) {
     background: rgba(227,224,215,0.5);
    display: inline-block;
}
/* Remove spacing between comet to grow and connect */
.desc-wrapper p:first-child {
    margin-bottom: 0 !important;
}
.desc-wrapper p:nth-child(10n+2) {
    margin-top: -5px !important;
}


Edited by tuanphan
Initial Revision

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

You're too kind, @tuanphan. Thank you so much.

Absolute LAST THING, what do I need to add under each .desc-wrapper to customize sizing of each text? (i.e. - make the top line of copy slightly bigger than the bottom?

Share this post


Link to post
  • 0

@tuanphan Thank you again for all of your help here!

I do have another question, though: what CSS do I need to add to left-align the copy? Please advise - thank you!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...