Hi Dickie,

Try this… you’ll need to host the image outside of Unbounce and replace #lp-pom-block-8 with the section ID.

<style>

  #lp-pom-block-8{

    background: url(http://www.URL.png) no-repeat center center;

    background-size: cover;

    height: 100vh;

}



</style>

Good luck 👍

Jack

Give this script a shot if you don’t want to host the image elsewhere - @Noah hooked me up with it.

Change swap the “#lp-pom-block-8” with your section ID.

<script>

  var sectionId = "#lp-pom-block-8";

  //box

  var section = document.querySelector(sectionId);

  var sectionChildren = section.children;

  var otherContent = $('.lp-positioned-content').children();

  var builderHeight = $(sectionId).height();

  console.log("initial height: "+ builderHeight);

  //find initial box height

  var initHeight = builderHeight;

  

  section.style.height = "100vh";

  for(var i=0;i < sectionChildren.length; i++){

  	sectionChildrenii].style.height = "100vh";

  }

  //#lp-pom-block-8, #lp-pom-block-8 *{height:100vh;}

  var moveStuff = function(type){

    //find computed box height

    var finalHeight = section.clientHeight;

    //find difference

    var diff = finalHeight - initHeight;

    for (var i=0;i<otherContent.length;i++){

      var content = $(otherContentoi]);

      var contentTop = content.position().top;

      var newTopValue = contentTop + diff;   

      content.css('top', newTopValue);

  	}

    initHeight = finalHeight;

  };

	

  //Run moveStuff to adjust content on load

  moveStuff("add");  



  var resizeTimer;

  //recalculate heights on resize

  window.addEventListener("resize", function(){

    clearTimeout(resizeTimer);

    

    resizeTimer = setTimeout(function() {

      // Run code here, resizing has "stopped"

      	moveStuff();

    }, 100);

  });

 

</script>

Thanks guys, unfortunately I’m still having the same issue. The content on the rest of the page keeps rising up out of their sections.

I’ve have more luck with this one, but where it creates problems is a fixed header. The header was fixed to the top of the page, but now appears half way down. Everything else appears to have adjusted.

Could you share with me the sticky header script you are using? I recall having the same issue - but fixed it by editing the script.

Thanks for the help. Sure, it is in 2 parts, a javascript:



//Fading Fixed Menu, modified from Fixed Menu v1.3.1

//Replace ID below with your own box ID

var boxToAppend = '#lp-pom-box-198';

//Choose pixel height of when menu fades in. Use the height of a page section like this: $("#lp-pom-block-93").height();

var showHeight = 0; 



//Set to 'header' or 'footer'

var headerOrFooter = 'header';



var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};

var colorOverlayCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"auto", "border-style":"none none none none"};

var childrenCSS = {"position":"fixed", "left":"auto", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};

  if (headerOrFooter === 'footer') {

    backgroundCSS["top"] = 'auto';

    backgroundCSS["bottom"] = '0px';

    colorOverlayCSS["top"] = 'auto';

    colorOverlayCSS["bottom"] = '0px';

    childrenCSS["top"] = 'auto';

    childrenCSS["bottom"] = '0px';

  }

  var boxParent = $(boxToAppend).parent();

  var boxClone = $(boxToAppend).clone()



  boxClone.appendTo(boxParent).css(backgroundCSS).children().remove();

  $(boxToAppend).css(childrenCSS);

  $(boxToAppend + '-color-overlay').appendTo(boxClone).css(colorOverlayCSS);

      

var bothBoxes = boxToAppend + ', ' + boxToAppend + '-color-overlay';

$(window).scroll( function() {

  if ($(this).scrollTop() > showHeight) {

    $(bothBoxes).fadeIn();

  } else {

    $(bothBoxes).fadeOut();

  }

});

</script>

and a style sheet:

<style>

/* Update #lp-pom-box-53 with the ID of your landing page's box element. */  

#lp-pom-box-198, #lp-pom-box-198-color-overlay {display: none;}



</style>

Ideally I would like the header to only appear after the user has scrolled down a little, but at this point a header that is positioned correctly would be a big relief.

Hey!

Set your “var showHeight = 0” to something like “var showHeight = 100” - this will fire off the header once they scroll down 100px.

Let me know if helps?

Unfortunately I’ve tried that. The header appears when I’ve scrolled 100 pixels, but it still appears halfway down the page.

Give this one a whirl. I think it’s nearly identical to yours, with maybe 1 or 2 differences. @Noah hooked me up with a fix, but cannot seem to locate the right script.

<script>

//Fading Fixed Menu, modified from Fixed Menu v1.3.1



//Replace ID below with your own box ID

var boxToAppend = '#lp-pom-box-101';

//Choose pixel height of when menu fades in. Use the height of a page section like this: $("#lp-pom-block-93").height();

var showHeight = 100; 



//Set to 'header' or 'footer'

var headerOrFooter = 'header';



var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};

var colorOverlayCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"auto", "border-style":"none none none none"};

var childrenCSS = {"position":"fixed", "left":"auto", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};

  if (headerOrFooter === 'footer') {

    backgroundCSSS"top"] = 'auto';

    backgroundCSSS"bottom"] = '0px';

    colorOverlayCSSS"top"] = 'auto';

    colorOverlayCSSS"bottom"] = '0px';

    childrenCSSS"top"] = 'auto';

    childrenCSSS"bottom"] = '0px';

  }

  var boxParent = $(boxToAppend).parent();

  var boxClone = $(boxToAppend).clone()



  boxClone.appendTo(boxParent).css(backgroundCSS).children().remove();

  $(boxToAppend).css(childrenCSS);

  $(boxToAppend + '-color-overlay').appendTo(boxClone).css(colorOverlayCSS);

      

var bothBoxes = boxToAppend + ', ' + boxToAppend + '-color-overlay';

bothBoxes = $(bothBoxes);

$(window).scroll( function() {

  if ($(this).scrollTop() > showHeight) {

    bothBoxes.fadeIn();

  } else {

    bothBoxes.fadeOut();

  }

});

</script>

Still no joy I’m afraid. It’s moving down by the difference in screen height and full screen panel. Is there a way to exclude a specific box from the otherContent variable maybe?

I am trying to dig into an older version of a page that we had this working on. Give me a few hours and I will hopefully get this out to you!

Thanks, I really appreciate your help on this.