[arneverschoorParticipant]

Hi Guys,

I am trying to create the following: background image on content band with a transparent color overlay. Like these examples:

http://snag.gy/JtoP4.jpg

http://snag.gy/OqaKL.jpg

I can’t get it to work. Is this possible via CSS?
Or would you recommend doing it via image software like coreldraw/photoshop?

Thanks!

[arneverschoorParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in!

Yes you can use Photoshop to have your background image with opacity. You can also do by adding your background to the content bands and please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#x-content-band-{1}:before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff0000;
  display: block;
  opacity: 0.125;
}

Feel free to change the background color. Always take note of the {ID} number of you content band.

Hope this helps. Kindly let us know.

[arneverschoorParticipant]

Great, thanks!

I am going to try this within a few days.
Will keep you guys in the loop.

[NicoModerator]

You’re most welcome.

Let us how it goes.

Thanks. Have a great day! 🙂

[arneverschoorParticipant]

Hmm. Not working correctly guys.

I’ve inserted the code in customizer CSS. It does not seem to select the right content band area, in fact in does not seem to select one at all. No matter which content band ID I enter, the colors keep appearing on the same specific areas. Check screenshots (the red areas/stripes):

http://snag.gy/QEuji.jpg

http://snag.gy/5vdPW.jpg

[ChristopherModerator]

Hi there,

Please try this code :

.page-id-7 div#x-content-band-1:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255, 0.5);
  content: '';
  display: block;
}

Instead of 1 in provided code put your content band id.
Please add background image to content band to see the changes.

Thanks.

[arneverschoorParticipant]

Again, by changing the content-band number it doesn’t apply to full width content-band, merely a container. On the other hand, if I insert content band 5. It selects the whole page.

[Rue NelModerator]

Hello There,

Sorry if it didn’t worked for you! How about we try this code in your customizer, Appearance > Customize > Custom > CSS

.x-content-band {
  position: relative;
}

#x-content-band-5:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.25);
  content: '';
  display: block;
}

Please let us know how it goes.

[arneverschoorParticipant]

Yep guys this did the trick!

Thanks again 😀

[ChristopherModerator]

You’re welcome.

[Author]

Posts