Making background images scale full page on all screen sizes

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:


var sectionId = “#lp-pom-block-8”;
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; = “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

var resizeTimer;
//recalculate heights on resize
window.addEventListener(“resize”, function(){

resizeTimer = setTimeout(function() {
  // Run code here, resizing has "stopped"
}, 100);


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

1 Like