Block Background Opacity

  • I am using blocks to display text over a background image in the TwentyTwenty theme. Using the block editor, I can see how to change the background color and how it uses set colors. I also see how to make a custom colors using RGB values. Is there a way to make the background color semi transparent?

Viewing 14 replies - 1 through 14 (of 14 total)

  • I assume you’re using the Cover template? If so, you can use the following in Appearance->Customize->Additional CSS

    .wp-block-cover p {
	opacity: .5;
}

    The range can go from 0 to 1:

    https://www.w3schools.com/css/css_image_transparency.asp

    Thread Starter BernWoz

    (@bernwoz)

    Thanks Jarret,
    I am using the default cover template & I tried your css as is, but it didn’t do the desired effect. Looking at the w3schools link you sent it seems I need a rgba setting. I am trying to make the color of a paragraph block semi transparent, so I can see the background image behind it but read the text easier. You can see my attempt here…
    https://99.0.2.10/cathy/
    The “Subscribe to my newsletter” is the paragraph block

    Many thanks
    Bernard

    Hi Bernard, I tried accessing that URL but it keeps timing out on me. Do you know if there are any issues with the hosting service right now or do you have another link?

    Thread Starter BernWoz

    (@bernwoz)

    Hm, I’m using a localhost with a pinhole on my gateway. I just tested this and I can get to a simple index.html in the root of 99.0.2.10 but I also get a timeout on the wordpress sites.
    Not sure why this happens

    Thread Starter BernWoz

    (@bernwoz)

    The web server is apache2 running on debian 10 on a VM.
    The gateway is allowing web server and https to this VM.

    • This reply was modified 4 years, 7 months ago by BernWoz.

    Hmm, are you able to get a screenshot of the page and the part you’re wanting to change? You can use something like https://snipboard.io to share the image link

    Thread Starter BernWoz

    (@bernwoz)

    I saved it here https://snipboard.io/HRZO48.jpg

    So you want the light yellow area to be transparent so that it shows some of the image behind it? If so, you should just be able to remove the p from the first line in the code I gave you and it should work if I understand correctly.

    Thread Starter BernWoz

    (@bernwoz)

    Deleting the ‘p’ did not work, there is no change in anything I see.
    I am also using wpforms – is it possible this is controlling the opacity?
    Also at the bottom of the ‘Cover Template’ panel, there is a slider control for overlay poacity – what is this supposed to control? it also seems to do nothing.

    I’m not really sure, maybe somebody else will see this and be able to figure it out. Without being able to see the live code, it is hard to say what code is needed to target particular elements on a page.

    Anonymous User 14254218

    (@anonymized-14254218)

    I guess the “desired effect” wasn’t achieved because the “opacity” also reduce opacity of the corresponding child elements.

    Try directly setting the background color of the element instead.

    .wp-block-cover {
	background-color: rgba(11, 22, 33, .5);
}

    Also, I would suggest using a custom css class which you can apply to the cover template block within the editor. This way you will keep the regular background color for all cover blocks without this class.

    afaik the “overlay opacity” slider controls an overlay color if you decide to use an image as background for this block.

    • This reply was modified 4 years, 7 months ago by Anonymous User 14254218.

    Adding background image at a section level rather than adding it through theme level (customizing or theme options level) provide with the option to adjust the opacity of a background image. not sure if this is what you are looking for

    Thread Starter BernWoz

    (@bernwoz)

    None of the above suggestions worked. I tried setting the opacity in Appearance->Customize->CSS. I also tried to select each block and add the code(s) in Advanced->CSS, but these did not work with any of the options. I am also using the plugin Twentig but for other settings, it does not control opacity.

    To fix my issue I displayed the paragraph as HTML in the block options and changed the following;
    orig: “background-color:#ecf6fa”

    My edit: “background-color:rgba(236, 246, 250, .5);”

    This works well but is tedious as I have to do it in each paragraph block.
    I also found that my blocks (the ones I edited as HTML) continue to display as HTML in my dashboard. I can preview as text but the regular block settings seem to disappear. I sometimes think that WordPress is Sooooo clumsy sometimes.

    If you are interested the page in question is here;
    https://catherinemcgreevy.com/books/

    If you have any comments to add, they could be useful for future reference. Otherwise I will mark this as solved.

    Thanks ??
    Bernard

    • This reply was modified 4 years, 6 months ago by BernWoz.
    • This reply was modified 4 years, 6 months ago by BernWoz.
    • This reply was modified 4 years, 6 months ago by BernWoz.
    Thread Starter BernWoz

    (@bernwoz)

    I have been trying to resolve this issue of block opacity.
    The example site is here;
    https://catherinemcgreevy.com/books/

    In this cast I can get the block opacity by editing the block paragraphs as HTML and adding this to the HTML;
    p style=”background-color:rgba(236, 246, 250, .5);”

    However I have to do this in every block which is not the correct or efficient method.
    If I try to add to Appearance->Customize->Additional CSS, this has no effect.
    I have also tried at the Page level in Block->Advanced->Additional CSS, but this also has no effect. And yes, update/publish and refresh of the intended page.

    Can someone advise how to correctly manage the block background opacity?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Block Background Opacity’ is closed to new replies.