Change Background Image by section ID on Long Scrolling Page

Question

I am adapting an HTML5UP template (Astral: https://html5up.net/astral), and I am running into a problem. I would like the background image to change with each ID, but whenever I attempt to apply solutions either with JavaScript or CSS, it modifies the background of that particular section (which I don't want to change) instead of the background of the entire page. The demo project can be found here: https://madisonpjones.com/projects/nwp

You can see an example of the error on this page: https://madisonpjones.com/projects/nwp/#about

The background of the section should appear like this: https://madisonpjones.com/projects/nwp/#visualize

In other words, I would like to maintain the white background for the section, changing the actual background.

The solution I have been using (that produces the error) was this:

  <script>
// Change background image using pure JavaScript 
   document.getElementById('about').style.backgroundImage = 
   'url("assets/css/images/overlay.png"), 
   url("assets/css/images/bg2.png"), 
   url("assets/css/images//bg.jpg")'; 
 </script>
         

For context, the Astral theme is a long scrolling page that has been modified to show sections as individual pages. I am sure this is what is creating the section-background issue, but I can't figure out how.

I have tried looking on numerous pages/forums and haven't found a workable solution. I see lots of options for changing the background on a regular site using JS or CSS, but I can't seem to make any of them work in this case. Thanks in advance for your help!

Answer 1

After some debugging, the correct way to do what you want seems to be this.

In main.js, you have an array called panels[], where each page of your site has it's own element. First, add a property in each, containing the corresponding background-image.

The panels[] array seems to be populated from some framework presets, imported on line 89:

panels[id] = t;

If you don't have access to the preset, I suggest you create an object right after line 45, which is:

.on('+desktop', function() {

And there you create the object my_bgs, exactly as I suggested in my other answer:

var my_bgs = {
    // Change the values according to your needs
    about:'url("assets/css/images/bg1.png")',
    visualize:'url("assets/css/images/bg2.png")',
    approach:'url("assets/css/images/bg3.png")',
    map:'url("assets/css/images/bg4.png")',
    conclusion:'url("assets/css/images/bg5.png")',
    references:'url("assets/css/images/bg6.png")'
}

Then, right after the already mentioned line 89 (panels[id] = t;), add:

panels[id].specialstyle = my_bgs[id];

Then, on line 178-179, where you have:

if (id in panels)
    panels[id]._activate();

Change that to:

if (id in panels) {
    panels[id]._activate();
    document.body.style.backgroundImage = panels[id].specialstyle;
}

That should do it.