[Nat JParticipant]

Not the greatest coder here so please bear with me.
Couple questions about how to control the content back with CSS and it’s capabilities.
1. Can you control the contend band background transparency?
If so where can I changes to – transparency of content band background w/ CSS.
2. Where can I add background pattern to the content band background w/ CSS.

Please provide examples.
Thanks,
N-

[RadModerator]

Hi Nat,

Thank you for writing in.

You can do this by using transparent image, or color opacity. For example, the content band ID is x-content-band-1, then the code would be:

#x-content-band-1 {
background: url(htpp://path/to/your/transparent-background-image/or/pattern/) no-repeat;
background-size: 100% 100%; /* optional, but this will create 100% width and height */
}

Or by this

#x-content-band-1 {
background: rgba(0, 0, 0, 0.5); /* 50% opacity of a black color */
}

You can put this css at your customizer custom css, or you could add to you theme/child-theme style.css.

Also note that you can get the content band ID by counting the content band of current page from top to bottom. Thus the top most will be x-content-band-1.

Hope this helps.

[Nat JParticipant]

Thank you!

[RadModerator]

Hi Nat,

You’re very welcome!

Thank You.

[Nat JParticipant]

Sorry I just noticed the when you set x-band property for one your setting them for all.
Is there way specify which page and bands are being effect?
Thank you,
N-

[RadModerator]

Hi Nat,

Yes, you could set it on specific page.

Example :

#page-id-6642 #x-content-band-1 {
background: rgba(0, 0, 0, 0.5); /* 50% opacity of a black color */
}

Whereas 6642 is the page ID that you can get from page url on admin (eg. post.php?post=6642&action=edit).

You could also use post ID, or portfolio ID in same way, like #postid-6642 #x-content-band-1 .

Hope this helps.

[Nat JParticipant]

You guys are officially awesome! Thank you so much for your help!

[Nat JParticipant]

I tried it out doesn’t work 🙁 went with a down and dirty solution background pattern with a transparency png.

[RadModerator]

Hi Nat,

You could give us a link so we can help you :). And a link for your background pattern.

Also, if you’re using a background pattern, it could be done in visual composer by editing(icon pencil “Edit this row”) your content band.

Hope his helps.

[Nat JParticipant]

This reply has been marked as private.

[Nat JParticipant]

This reply has been marked as private.

[AlexanderKeymaster]

Hi Nat,

I’ve taken a look, and the reason it’s not working is because Visual Composer is setting an inline style of background-color:transparent;

You could edit the page, then edit a content band, and add this to the “Style” field:

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

Thank you as well for the feedback!

[Author]

Posts