Making a row transparent

Beaver Builder
1

Is there a way to make a given row transparent so that the background image shows through it?

Adding a background image as a background photo in Row Settings > Style of a given row does not look great, design-wise, as the image is magnified:

see here for example: http://test3.noticedwebsites.com

Thanks, Phil

2

Hi Phil,
I’m not sure if I understand your question, every row is transparent by default and the page / content background is shown through it, what’s the problem?

About the background image magnification, there’s a fill/fit/none option to scale it, you may try that options with suitable images for the design you are wanting to realize.
Have a look also at the built-in “Scroller” Homepage Layout template and see how is built, that’s probably different from your request as it makes use of parallax effects, but you may find it interesting too.

Hope this helps.

Alessandro

3

Hi Alessandro,

I want the body background image {background-image(url: background.jpg;} to show thru a row set to “transparent”, if possible?

Thanks, Phil

4

Hi Phil,
a row without background shows what’s visually below it.

In your example case the rows are inside a white container which is inside the page.
The white container is visually on top of the page background and that is shown through your rows if you don’t set any background for them.

You can obtain that effect using the same page background for the row, as you did, but you also need to set scale to “none” and repeat to “tile” to have it look the same as the page background.

If you set the exact same resource image from WP media library for the page and row, it will get cached from the browsers and loaded only once, so your page load times wont suffer.

To go further, you may want to have a look at something like http://www.w3schools.com/html/html_layout.asp to get some background knowledge on HTML layouts.

Hope this helps!

Alessandro

5

Got it!

Thanks Alessandro.

Regards, Phil