[dav9000Participant]

Hi,
How do I change the opacity on a background image set on a content-band.
I left visual composer and checked in the text editor and it has bg_image=”79″ in the content-band shortcode, so there is no where to add a style for opacity on the image..

thank you.

[Paul RModerator]

Hi,

Thanks for writing in!

You can do something like this.

#x-content-band-1 {
   background: rgba(0, 0, 0, 0.5); 
}

The code will set the background of content band 1 to black with 50% opacity.
Please change it with the color you want.

You can use this link to generate the rgba for your color.

http://html-generator.weebly.com/css-rgba-color-generator.html

You can add it under Custom > CSS in the Customizer.

Hope that helps

[dav9000Participant]

Hi,
I have a background image in the content band.. so it is the opacity of the background image I need to change….
Also it is for particular pages not all pages…

thanks

[CousettMember]

Can you provide us with the specific pages you want to change and your URL in general and we will be happy to help.

[Fiona AParticipant]

I was just about to ask this question.

Isn’t there just a general code we could put in the style box?

[Kosher KMember]

Hi Fiona,

You can try adding this code in style box

background: rgba(0, 0, 0, 0.5); or background-color: rgba(0, 0, 0, 0.5);

Cheers

[dav9000Participant]

Hi,
The code you gave for Fiona does not work for a background image
,is it possible to change the opacity of a background image in a content band?

thanks

[CousettMember]

You can add opacity: 0.5; as a style in VC or add it to the CSS of the content band div.

[Fiona AParticipant]

Perfect – cheers!

[dav9000Participant]

Hello,
using opacity 0.5; in the style for the content-band changes the opacity for everything in the band, not just the background image..

[Nabeel AModerator]

Hi again,

Can you please provide the URL of your website so we can check the opacity issue?

[dav9000Participant]

This reply has been marked as private.

[Kosher KMember]

Hi There,

Sorry for the confusion, But you can’t apply opacity to a background image,

You either need to edit your image opacity using photoshop or add the image to that content band this way below,

assuming you wanted to add the image on #x-content-band-1

#x-content-band-1:before {
 content: url(your-image-url-here.jpg);
 position: absolute; 
 width: 100%;
 height: 100%;
 z-index: 0 /*try changing this to -1*/;
 opacity: .5;
}

Hope that helps,

Have a great day

[MocombegParticipant]

I’ve tried everything that you’ve suggested to the other user and I can’t get my opacity to change without changing the opacity in all of these items can you help me?

[NicoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Author]

Posts