Fullscreen background image

well – if it is with parent theme ok – it will be ok with child-theme too.
You can achieve this only on page editor and a few css settings

the point is if you like to have footer and socket ?
you can see here a test-page. https://webers-testseite.de/fullbackground/
with one color-section on top with a 100% height
transparent-header setting (style the header-bg as you like)
( because there is no footer nor socket: you can have background-image with scroll too – or fixed)

Content can be everything Enfold offers on alb elements

you can have the same with background-video – hope it works for you ( on my end – yes it works)

• This reply was modified 6 years, 9 months ago by Guenni007.

you see the link to the test-page: https://webers-testseite.de/fullbackground/

if this is what you like to have – i tell you how to reach it.
https://webers-testseite.de/naturleben/?page_id=211

each image here : click to enlarge

1) use the stretched layout on enfold.
2) logo and navigation on top
3) header: logo left menu under it
3a) Footer: dont display footer nor socket
4) header-behavior : i have taken: Let logo and menu position adapt to browser window and sticky header
5) goto Layout Builder and mark : “Show element options for developers”

6) now we had to obtain your very small content
6a) for each page you have to have that layout here:

6b) and the grid gets this:

7) now the css for quick css

.responsive body {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    height: 100vh !important
}
.responsive body.page-id-211 {
    background-image: url(path-to-your-image);
}
#header {
    width: calc(100% - 60px) !important;
    background: transparent;
    top: 30px;
    margin: 0 30px;
}
.html_stretched #wrap_all {
    background-color: transparent !important;
}
#main {
    background-color: transparent !important;
}
.main_color, .main_color .site-background {
    background-color: transparent;
}
.header_bg {
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important; 
}
.notfullsize .flex_cell.with-background {
    background-color: rgba(255,255,255,0.9) !important;
}
#av-layout-grid-1 {
    margin-bottom: 100px !important;
}

@media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header {
margin: 0 30px !important;
}
}

you see here on that css that you can now have for each page a different background-image

.responsive body.page-id-211 {
    background-image: url(path-to-your-image);
}

to have now not a fullwidth grid-row insert this to your functions.php of your child-theme:

function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 30px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

if you need further assistance – your welcome
if you have done it send me a link to fine tune it

And – if you don’t like to determin for each page a background-image – and you can live with a slider – there will be with the same setup a plugin which handels the background.
See testpage – on every refresh there will be a new background ( the other pages are not adopted to that layout)

if you like to have the possibility to change the content from left to right cell.
you have to give to the cell a class f.e. with-background

than change this in your css (above i did it allready)

.notfullsize .flex_cell.avia-builder-el-last {
    background-color: rgba(255,255,255,0.9) !important;
}

to :

.notfullsize .flex_cell.with-background {
    background-color: rgba(255,255,255,0.9) !important;
}

see page: https://webers-testseite.de/naturleben/?page_id=211
with 2/5 3/5
and on bottom the other way round

Hi,
I’m reviewing the steps for a fullscreen background image from Guenni007. However, I’m confused with the following:
“6) now we had to obtain your very small content
6a) for each page you have to have that layout here:

6b) and the grid gets this:”

It looks like something has been removed. Can anyone tell me what is supposed to be there? I only have two different backgrounds for the pages on this site. Thanks