Updating Background Image Based on Section ID in Lengthy Scrolling Page

Question

Updating Background Image Based on Section ID in Lengthy Scrolling Page

Currently, I am customizing a template from HTML5UP (Astral: ). However, I have encountered an issue. My goal is to change the background image with each ID, but every attempt using JavaScript or CSS only modifies the specific section's background instead of the entire page's background. The demo project can be viewed here:

An example of the problem can be seen on this page:

The desired appearance for the section's background should be like this:

To clarify, I want to keep the white background for each section while changing the actual background.

The approach I used that results in the error was:

  <script>
// Changing background image with 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>

In context, the Astral theme is a single long-scrolling page converted to display sections as individual pages. This modification might be causing the section-background problem, which I am struggling to resolve.

I have searched through multiple pages and forums without finding a viable solution. While there are plenty of options for changing backgrounds on usual websites using JS or CSS, none seem to work in my current situation. Thank you in advance for any assistance!

javascript html css background

Answer 1

Answer №1

Upon thorough troubleshooting, the most effective method to achieve your desired outcome appears to be as follows.

In main.js, you will find an array named panels[], where each page of your website has its own element. Begin by adding a property in each element that contains the corresponding background-image.

The panels[] array seems to be filled with data from preset frameworks, which are imported on line 89:

panels[id] = t;

If you do not have access to the presets, I recommend creating an object right after line 45, like so:

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

Inside this block, create the object my_bgs, following the suggestions from my previous response:

var my_bgs = {
    // Adjust the values based on your requirements
    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")'
}

Subsequently, right after line 89 (panels[id] = t;), include the following code snippet:

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

Then, at lines 178-179, where the code reads:

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

Adjust it to:

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

These modifications should address your issue effectively.

Answer 2

Upon thorough troubleshooting, the most effective method to achieve your desired outcome appears to be as follows.

In main.js, you will find an array named panels[], where each page of your website has its own element. Begin by adding a property in each element that contains the corresponding background-image.

The panels[] array seems to be filled with data from preset frameworks, which are imported on line 89:

panels[id] = t;

If you do not have access to the presets, I recommend creating an object right after line 45, like so:

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

Inside this block, create the object my_bgs, following the suggestions from my previous response:

var my_bgs = {
    // Adjust the values based on your requirements
    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")'
}

Subsequently, right after line 89 (panels[id] = t;), include the following code snippet:

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

Then, at lines 178-179, where the code reads:

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

Adjust it to:

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

These modifications should address your issue effectively.

Answer 3

Answer №2

Based on the code provided, it appears that you are successfully changing the background of a specific section (

<article id="about" class="panel">

). If your intention is to change the background of the entire page instead of just the section, you should target document.body rather than document.getElementById('about').

To achieve this, modify your code as follows:

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

UPDATE:

Based on new information provided, consider creating a style object for each ID and dynamically setting the background image based on the displayed article.

While this approach may seem cumbersome, it could be necessary if your access to resources is limited.

You can implement this concept as shown below:

<script>
// Update background image using plain JavaScript
var id_styles = {
    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 id in id_styles) {
    if (document.getElementById(id).style.display !== 'none') {
        document.body.style.backgroundImage = id_styles[id]; 
    }
}
</script>

Answer 4

Based on the code provided, it appears that you are successfully changing the background of a specific section (

<article id="about" class="panel">

). If your intention is to change the background of the entire page instead of just the section, you should target document.body rather than document.getElementById('about').

To achieve this, modify your code as follows:

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

UPDATE:

Based on new information provided, consider creating a style object for each ID and dynamically setting the background image based on the displayed article.

While this approach may seem cumbersome, it could be necessary if your access to resources is limited.

You can implement this concept as shown below:

<script>
// Update background image using plain JavaScript
var id_styles = {
    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 id in id_styles) {
    if (document.getElementById(id).style.display !== 'none') {
        document.body.style.backgroundImage = id_styles[id]; 
    }
}
</script>

Updating Background Image Based on Section ID in Lengthy Scrolling Page

Answer №1

Answer №2

Similar questions

Suboptimal placement of second submenu in Navbar

Ways to access data attributes during a Bootstrap 4 popover event

I need to modify the ng-style attribute multiple times within a JavaScript function

Organize the strings by first sorting them alphabetically based on the first letter and then by length starting from the longest. Next, arrange the strings in ascending

What are the best methods for looping through ids in MongoDB and executing actions on them?

Overlay Image on Card, Overflowing into Card Body

The Jquery function was implemented twice in the code

a JavaScript method in Selenium for performing a double-click action on a WebElement

Using Selenium to interact with drop-down lists using div tags instead of select tags

Using a loop to pass a template to a function and create a dynamic component

A step-by-step guide on splitting an element into two separate elements using jquery

Attempting to utilize media queries in order to create a responsive header image

Using multiple html files with ui-router's ui-view feature

Unable to perform multi-delete action upon clicking the checkbox button as intended

The NativeAppEventEmitter does not return any value

Tips for Disabling Alert Pop-ups when Launching Desktop Applications from a Browser

Triggering the MouseLeave event in Chart.js with Angular

How to Target HTML Tags Locally using CSS Modules in Next.js?

Change the color of the navbar when scrolling using bootstrap and jquery

Having difficulty accessing and modifying child elements