fixed background photo

Hey sundara88,
Sorry for the late reply, you can have a single fixed image for a background so the page content scrolls over the top of it with transparent sections.

First you will give the page a fixed background-image and give it a transparent background color:

<style>
body #main {
    background-image: url(https://thesteelframingcompany.com.au/wp-content/uploads/2017/09/Narrawa5Wide.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
}
.main_color {
    background-color: transparent;
}
</style>

If you use this css in your Quick CSS or style.css you will also need to assign the page ID to it so it doesn’t apply this to all pages. One way around this is to add the css above in a code block element at the top of your page.
Now as you add your content elements they will be transparent until you add a background color, so you can use two color sections with background colors and a space between them to give the illusion of a transparent “window”
That is really all there is to it.
I put together an example for you that you can test with, just Enable the Avia Layout Builder Debug and add this shortcode to the debug window and save.

Best regards,
Mike