Site Middle color background

Hi,

Perhaps your code needs a little adjustments. Can you share your code here? So I can try it with my test site and attempt to troubleshoot it.

Thank you Kharis

My codes are (3);

A) ADDITIONAL CSS code:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
html {
overflow: scroll;
overflow-x: hidden;
}
.site {
    background-color: transparent !important;
}
.go-top.show {
  display: none !important;
}
.page-wrap .content-wrapper {
  padding-bottom: 0 !important;
}
/* Mouse cursor pointer cross look */
div {
    cursor: crosshair;
}
.preloader .pre-bounce1, .preloader .pre-bounce2 {
    display: none;
}
.preloader .spinner {
    background-image: url(https://XXX.gif);
	display: flex;
  height: 100vh;
	width: 90%;
	height: 90%;
	margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
	background-position: center center;
}
.site-footer {
  display: none;
}

B) HTML code (inserted in the 3rd section; Edit elements – Edit HTML):

<script>jQuery(function($){
    $(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });

}).scroll();
});</script>

C) Page settings (EAC custom CSS)

body {
  transition: background-color 3s ease;
}
.color-white {
  background-color: #ffffff;
}
.color-light {
    background-color: #cdcdcd;
}
.color-black {
  background-color: #000000;
}
#masthead {
    position: absolute !important;
    background-color: transparent;
}

Thank you for you help & Best regards,
BR

• This reply was modified 2 years, 8 months ago by managerslo.
• This reply was modified 2 years, 8 months ago by managerslo.
• This reply was modified 2 years, 8 months ago by managerslo.

Hy

I have temporarily disabled this section in my live site for now, due to incorrect page display, but the code is the same as stated above.

Thank you & Best regards,
BR

• This reply was modified 2 years, 8 months ago by managerslo.