[Spyros PanParticipant]

Hello,

Basically, all I want is to alter the opacity settings of an image used as a background in a band in a page other than the home page.

I am using Visual Editor and I have created two containers with 1/2 + 1/2 layout.
On the left container I have a Audio Embedded code.
On the right container there is a text with an image as background which covers the entire span of the band.

Every CSS styling I have tried so far is reducing the opacity throughout the band and that is something I do not want.

Here is the page I am working on.
The stack is integrity-light (child theme).

Thnx

[Spyros PanParticipant]

erm…

any ideas on this one?

[RadModerator]

Hi there,

You mean by exactly changing background image’s opacity? Or just add additional background color for the contents?

There is no available background opacity for background images, how about this trick?

.page-id-6689  .x-content-band {
  position: relative;
  }
.page-id-6689  .x-content-band:before {
  content:"";
  display: block;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  }

Let us know how it goes.

[Spyros PanParticipant]

it works if perfectly if I change the Alpha value to 0.2 for example.

but hey this is a very nice trick because by tweaking all the values I can tint my images and I had no idea how to do this…

he he

thnx so much. have a good weekend.

[Spyros PanParticipant]

UPDATE:

This goes for any other user not competent enough with CSS (as myself).
the above code targets all the bands in a page.
if you would like to implement a different design for each band in a page then you need to target each band differently.

for example, if I want to do changes on band-1 then the code for that action would be:

.page-id-6689 #x-content-band-1 {
position: relative;
}

.page-id-6689 #x-content-band-1:before {
content:””;
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
width: 100%;
background-color: rgba(115, 98, 111, 0.5);
}

hope this could be of help.

🙂

[ChristopherModerator]

Thank you for your contribution Spyros.

[Author]

Posts