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;
}



You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

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...