Question 387397 in Html Question posted in
Some basic documentation can be found here.

Html – Change Background Image by section ID on Long Scrolling Page

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!

Tags:

2

Answers


  1. 0

    By the code you submitted, it seems you are changing the background of the section (in this case, <article id="about" class="panel">, which is working as it is supposed to.

    If what you want is to change the page background, instead of the section, then you should use document.body instead of document.getElementById('about').

    So your code should be as:

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

    EDIT:

    According to the new infos provided, you could try creating an object of the styles for each ID, and set the style of the body according to which article is displayed.

    I agree it might look like an ugly approach, but if you are very limited in your access to the sources, it might be the only way.

    It would look something like this:

    <script>
// Change background image using pure JavaScript
var id_list = {
    // 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")'
}
for (var article_id of Object.keys(id_list)) {
    if (document.getElementById(article_id).style != 'display: none') {
        // This is the displayed article
        document.body.style.backgroundImage = id_list[article_id]; 
    }
}
</script>
    Login or Signup to reply.
  2. 0

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

    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. It would result with something like this:

    panels['about'].specialstyle = 'url("assets/css/images/bg2.png")';

    Then, in the main.js file, 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search