Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I’ve read many threads talking about how to darken a row background image, but none seem to work.
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.
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