CSS : Cascading Style Sheet – the ids and classes that comes first in the markup are in front
the first that comes on the markup is the html – and html is not a class!
Where is your page-id ? : It is on the body tag! ( and that has the id : top and comes after html)
and that is right: those frames are childs of body – so there is a space between #top and .av-frame

so :

html.html_av-framed-box #top.page-id-29 .av-frame.av-frame-vert  {background: #ff6600 !important}
html.html_av-framed-box #top.page-id-29 .av-frame.av-frame-bottom  {background: #ff6600 !important}
html.html_av-framed-box #top.page-id-29 .av-frame.av-frame-hor  {background: #ff6600 !important}
html.html_av-framed-box #top.page-id-29 .av-frame.av-frame-right  {background: #ff6600 !important}

hi kahil – looks very nice
are the new possibilites of developer tab are included to your alb elements? Custom Class and ID etc.?

My first thought was to use the waypoints script. Enfold has on default implemented the waypoints script.
You can google to its functionality.

if you have defined for the color-section background-colors. You can use it to give that color to the header_bg background-color:
see here: https://webers-testseite.de/datenschutzerklaerung/

this comes to child-theme functions.php:

function header_bg_color_on_scroll() {
?>
<script>
    (function($) {
    var element_to_animate = $('.avia-section');

    element_to_animate.waypoint(function(direction) {
    if (direction === 'down') {
        var section_color = $(this.element).css('background-color');
          $('.header_bg').css('background-color', section_color);
        }
        }, {
          offset: '100px'
        });   
    element_to_animate.waypoint(function(direction) {
    if (direction === 'up') {
        var section_color_prev = $(this.element).prev().css('background-color');
        $('.header_bg').css('background-color', section_color_prev);
          }
        }, {
          offset: '100px'
        });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'header_bg_color_on_scroll', 9999);

The Offset depends on your header height in scrolled mode – so if you have a shrinking header it will be the end height after scroll.
You can test it yourself

what enfold version did you use. These duplicate id’s if you use a header layout where header_main_alternate was created is solved on newer versions. f.e. on pages with header top navigation below:

you see that the original menu ul got a different id

i mentioned it too that the message of ThemeForest ( Envato ) was a misinformation. What i try to say about the link above is that I can’t understand how to update live sites, especially those with shop systems, without having a quick rollback in the background.
With the above mentioned method this is a thing of not even 5 min to return to the old state.
Instead, we read here some abusive tirades and that the team has to do as fast as possible to fix the bugs.
If an active website is running, then there is no need to update it – if I have only such pages at the start, you should only update according to the method above.

By the way – it is not the first time that Envato announces a new Version and there was still the old one – or the complete download is not updatet – but only the installable WordPress File has the new version etc. pp.: in order to save yourself unnecessary work, a quick look into the style.css would be helpful after the download.

yes – I also wanted to test the new update directly and saw then also that it was still the old version.
I can’t understand your problems after an update. In a “non-test environment” you at least keep a rollback ready.
I posted this already in October 2018 and is still the safest method to update and come back in case of inconsistencies or bugs.
https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107

I can’t confirm that on my side too. Although the gtmetrix values are not so nice –
It loads itself everything quite quickly ( And i cleared all cachings before making the screen film ) . See film. https://webers-testseite.de/wp-content/uploads/maskenzauber.mp4
Chrome only reports mixed content when loading some fonts – see picture.
but if you see the more informative Speedtest on gtmetrix: https://gtmetrix.com/reports/maskenzauber.com/88uokIa1
you will see that what probably slows down the most are the images that have not been optimized for the output sizes.
Next thing is matomo.js could be compressed ( thats your analytics tool ? )

and what hampers you to change a littlebit the layout:

first : that is not possible.
second: Look here: https://webers-testseite.de/feedxl/
what is wrong on having it this way? in other words: what is the benefit of having the whole thing in one section.

https://webers-testseite.de/feedxl-2/
it is possible to have more than one background on a container – all definitions are separated by commata:
see here a little tutorial: https://webers-testseite.de/multiple-background-images/
You have to have the horse as cutoff png file.
but you then have the problem on responsive case with the not growing half part at the bottom – so the text has no place to be in there – and it grows then to the top into the other half.
(on that example i have the custom-id of halbhalb (that is the german expression for halfhalf)
and that color-section got no padding!:

#halbhalb {
	background-repeat: 	no-repeat;
	background-image: 	url(https://webers-testseite.de/wp-content/uploads/pferd.png), linear-gradient(#f2d7d0 50%, #fe6d6a 50% );
	background-attachment: 	scroll;
	background-position: 50% top, center center;
	background-size: auto 50% , 100% 100%;
}

#halbhalb.avia-section.av-minimum-height .container .content {
    vertical-align: bottom;
}

So my advice is to use two color-sections. https://webers-testseite.de/feedxl/

i try to use the filter too – experimenting with its use- but your code Nikko do not have effect on my installation too.

ich befürchte, dass ein “Banner” – Bild in der Position – mit einem Header der dann oben on top fixed ist während der Banner ( Bild ) wegscrollt nicht einfach zu erreichen wird sein.
Sowas ist natürlich möglich – aber kostet wohl ein wenig Zeit. Eventuell belehren mich die Mods eines Besseren

___________

I’m afraid that a “banner” – image in position – with a header that is then fixed on top of top while the banner ( image ) scrolls away will not be easy to reach.
Such a thing is of course possible – but costs probably a little time. Maybe the mods will teach me better

have you a shrinking header? thats what i ask above.
these two classes are only present if there is a shrinking header.
( you know – i do not see private content area as participant )

ich denke dann ist der beste ansatz: ein header widget bereich anzulegen:

/*********header widget ****************************/
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

and create a widget on widgets called “header” – insert your image there and style it via quick css

you are welcome.

this is a nice way to pick out the enfold shortcode to select some layouts from the pages of a demo.
Because of the original insertions (image links – categories – postlinks etc. pp) – you only had to adjust the layout after import.

sometimes on those xml datas the content starts with : <wp:meta_value><![CDATA[{{{title}}} – copy only the enfold shortcode – without those curly brackets. ( Mostly it will start as mentioned above: <content:encoded><![CDATA[

you have to adjust now the content of the layout builder elements – because the links f.e. in it works if the link target is set to your targets.
And the icon-set is not in your installation