This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Opacity or Transparency of Row Background Image

Open 1 reply customizationpluginplugin-page-builder
WSO.host
9 years ago · Last reply by WSO.host 8 years ago

I’ve read many threads talking about how to darken a row background image, but none seem to work.

Transparent Background For

Page Builder Row Background transparent

Backgrounds in page builder rows/columns

Is there a way to change the opacity of a row background image so that if the background color is set to black it will effectively cause the image to darken?

Thank you.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. WSO.host 8 years, 8 months ago

    Here’s a partial solution. Others are encouraged to make this better. The reason it is partial is because the options for controlling how the background image is displayed under the Design tab (Background Image Display) no longer apply to the image. A solution for the opacity effect while still using the built in row background image functions in Page Builder has yet to be found (so far). But, this might work for you in a pinch.

    When editing the row, remove any color or image background settings under the Design tab in Page Builder. Then in the Attributes section find the CSS Styles box and use one of the following lines of code, or make your own modified version:

    Lighten the background image 50%
    background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(http://URL_TO_YOUR_IMAGE);

    Darken the background image by 50%:
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(http://URL_TO_YOUR_IMAGE);

    Create a gradient from 50% light to 50% dark:
    background-image: linear-gradient(rgba(255,255,255,0.5),rgba(0,0,0,0.5)), url(http://URL_TO_YOUR_IMAGE);

    The set of 3 numbers indicates a color in RGB. The last number is the opacity, 1 is solid, 0 is none.

    NOTE: The URL to your images may be an issue if it has spaces. Page Builder would not accept quotes around the URL, it kept trying to escape them with backslash that caused an error in the HTML. When removed it worked. But if the URL to your images contains spaces or other special characters this might be an issue. Renaming the image would solve it.

    This will work well with 95% of the browsers out there and that number will only get better. Safe to use. Just keep in mind the limitations of the image placement / stretching features using the built in Page Builder controls.

    Give us a like of you appreciate the tip (opens a new window):
    https://facebook.com/WSOhost

    WSO

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread