Skip to main content

Hi everyone, I’ve been looking on the forum for quite some time, however, I can’t find out how I can make the background images of my landing page full width and height, independent of the screen size so that the images would be full-screen size all the time.


Somewhere on the forum, I found a script by @Stefano which manages to scale the background, however, the script moved the other elements of the section downwards. I’m trying to find a script that lets me scale the images to full width, while keeping the other elements intact. Is there someone that has been able to do this?


See the script below:

<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++){
sectionChildren[i].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 = $(otherContent[i]);
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>

Hey @Treras you can make background images full width for a page section and the full page in “page properties.” Are you trying to do something different? Otherwise selecting for page edges and fit to container should work.


Screen Shot 2020-01-28 at 11.14.12 AM


Reply