[terracandidoParticipant]

Hello,

If one has a section background image, with text or other elements laid on top, is it possible to adjust the opacity of the background image only?

Apologies if this has been already answered elsewhere, but I have not been able to figure it out. M

Thanks in advance.

[ChristopherModerator]

Hi there,

Please provide us with URL and let us know where you want to add opacity.

Thanks.

[terracandidoParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I would like to check your pages but your site is under construction.

Please add a class name like my-class to those sections and then add the following code in Customize -> Custom -> CSS :

.my-class:before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: " ";
    background-color: rgba(255,255,255,0.5);
    left: 0;
    right: 0;
    top: 0;
    display: block;
    bottom: 0;
}

Hope it helps.

[terracandidoParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! Please replace previous CSS with the following:

.home div#x-section-3 .x-container.left-text.marginless-columns {
    background:rgba(255,255,255,0.5);
/*     background:rgba(0,0,0,0.5); */ /*black overlay */
    padding:45px 0!important;
    height: 340px;
}

/* optional text shadow */
.home div#x-section-3 .x-container.left-text.marginless-columns p,
.home div#x-section-5 .x-container.max.width p {
    text-shadow: 0px 0px 2px #000000;   
}

.home div#x-section-3,
.home div#x-section-5 {
    padding: 0!important;
}

.home div#x-section-5 .x-container.max.width {
    background:rgba(255,255,255,0.5);
/*     background:rgba(0,0,0,0.5); */ /*black overlay */
    padding:45px 200px!important;
    height: 375px;
    max-width:100%;
    width:100%
}

Hope this helps – thanks!

[ChristopherModerator]

Hi there,

Please add this as well:

.opacity{
position:relative;
}

Thanks.

[terracandidoParticipant]

Wonderful support ! Thanks very much, it is perfect.

[ThaiModerator]

You’re most welcome 🙂

[terracandidoParticipant]

Hello again, I made a few changes to the page, including deleting some sections and the opacity of all sections is now 100%. The sections where I’d now like to adjust the opacity are in positions “1” and “3”, so I tried to adjust accordingly in the customiser with the following but I didn’t get it right as opacity is still at 100% for all sections.

Within cornerstone, I named the sections, e.g. 1 = les origines ; 3 = philosophie…but I don’t think that plays a role in the customiser, does it? Login info still the same, thanks again in advance.

.home div#x-section-1 .x-container.left-text.marginless-columns {
background:rgba(255,255,255,0.5);
/* background:rgba(0,0,0,0.5); */ /*black overlay */
padding:45px 0!important;
height: 340px;
}

/* optional text shadow */
.home div#x-section-1 .x-container.left-text.marginless-columns p,
.home div#x-section-3 .x-container.max.width p {
text-shadow: 0px 0px 2px #000000;
}

.home div#x-section-1,
.home div#x-section-3 {
padding: 0!important;
}

.home div#x-section-3 .x-container.max.width {
background:rgba(255,255,255,0.5);
/* background:rgba(0,0,0,0.5); */ /*black overlay */
padding:45px 200px!important;
height: 375px;
max-width:100%;
width:100%
}
.opacity{
position:relative;
}

.p-design {
font-size: 20px;
text-align: left;
line-height: 55px;
color: grey;
}

[ZeshanMember]

Hi there,

Thanks for updating the thread!

Can you point us to the page where you have these sections so we can take a closer look?

Thank you!

[terracandidoParticipant]

Sorry! It is the page called “presentation”.

[JackKeymaster]

Hi there!

I see you have a caching plugin active, so none of my changes I’ve tried are taking effect, would you mind disabling that?

Alternatively, what you could do in cornerstone is this, click on the section you want and add a background color, for example black, then enable advance controls and where the box that says “style”.

Add this

opacity: 0.78;

And save, you’re section will now have the opacity. 🙂 You can do this per section and all from within Cornerstone, just change the 0.78 as needed. I hope this helps! 🙂

[terracandidoParticipant]

Hello, Thanks for your answer.

Is the catching plugin you’re referring to “SG CachePress” ? If so, I have deactivated it.

I tried your suggestion of adding a background color then adjusting the opacity and it works well, BUT it also affects the opacity of the text. I would like to reduce the opacity of the background/section image, and keep the text in front at full opacity.

It did work before, but I don’t understand enough about the customizer to get it back again….! Thanks again.

[JackKeymaster]

Hi there! 🙂

Thanks for the additional information. One of the best ways to do this is. In Cornerstone, where you have the section with the background image.

You can actually add opacity to each element within a section, so if you click the whole section, you can add opacity to just the background image for example. Or you could click the text and add opacity just to that. Just make sure advance controls is enabled and then add
opacity: 0.50; into the “Style” section.

Thanks! 🙂

[Author]

Posts