Title and Text background color in Parallax section

Shapely
1

Hi guys,

Is it possible to add a background color to the H1 and P content in Parallax sections? The background image I want to use a little busy and so it makes it difficult to read the text on the image behind in the parallax. So to differentiate it, I thought I’d add a background box behind it (width to be determined by the width of that text, NOT full width) and something like #444 at .4 opacity. That way it’s not entirely covering the back image, but at least makes the white lettering pop.

Is this possible?

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it along with an image of the areas in question?

Best Regards,
Support

3

Thanks, yes, the webpage is at
www.newionsite.com/WordPress/

I’m attaching 2 images. One shows what it currently looks like, and one is photoshopped to look how I’m trying to get it to look like.

4

Hello there,

You can use the following CSS code to add the backgroundcolor by going to Appearance > Customize > Additional CSS and pasting it there.


h1 {
    background-color: #6a6f77;
}

.mb32 p {
    background-color: #6a6f77;
}

Best Regards,
Support

5

But won’t that apply to every h1 tag across the entire site?

6

Also, that does full width of the content… I’m trying to get it to only be a little bit wider than text.

Something like,
`width:auto;
background-color: rgba(100, 100, 100, 0.8);
display: block;’

But I only want it to apply inside that parallax section.

7

Hey there,

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS


.home .top-parallax-section h1 {
  display:table;
  margin:0 auto;
  margin-bottom:10px;
  background-color: #6a6f77;
  padding:5px 25px 
}

.home .top-parallax-section .mb32 p {
  display:table;
  margin:0 auto;
  margin-bottom:20px;
  background-color: #6a6f77;
  padding:5px 25px 

}

Best regards,
Support.

8

Excellent!

That’s exactly what I was trying to make!

Thank you guys!

9

Hi, there

Thank you
Now I will now close the topic and mark it as resolved.
Feel free to contact us again Thanks!