Background Image Selector

Preview

Change the capitalized text as necessary:

const bgImages = ['IMAGE_URL', 'IMAGE_URL', 'IMAGE_URL'];

Admin CP → Themes → Board Templates: Place it where you want the "Change Background Image" link to appear.

<a href="javascript: void(0)" id="bg_changer">Change Background Image</a>

Admin CP → Themes → Board Templates → Below the board

<div id="bg_popout" class="panel" style="display: none; border-width: 1px; position: fixed; width: 500px; height: 200px; top: calc(50% - 100px); left: calc(50% - 250px); padding: 10px">
<a href="javascript: void(0)" id="remove_bgi">Remove Background Image</a>
<span id="close_popout" style="font-size: 15px; font-weight: 700; cursor: pointer; float: right" title="Close">X</span>
<div id="bg_images" style="display: flex; justify-content: space-between; padding-top: 25px; max-width: 480px; overflow: auto; margin: 0 auto"></div>
</div>

<script>
const bgImages = ['IMAGE_URL', 'IMAGE_URL', 'IMAGE_URL'];

for (const i of bgImages) {
    const img = document.createElement('img');
    img.src = i;
    img.alt = 'BG Image';
    img.style.cursor = 'pointer';
    img.width = '150';
    img.height = '150';
    document.querySelector('#bg_images').appendChild(img);
}

document.querySelector('#bg_changer').addEventListener('click', function() {
    document.querySelector('#bg_popout').style.display = 'block';
});

document.querySelector('#close_popout').addEventListener('click', function() {
    document.querySelector('#bg_popout').style.display = 'none';
});

document.querySelector('#remove_bgi').addEventListener('click', function() {
    localStorage.removeItem('background-image');
    document.querySelector('#bg_popout').style.display = 'none';
    document.body.style.backgroundImage = 'none';
});

const imgs = document.querySelectorAll('#bg_images img');

imgs.forEach(element => {
    element.addEventListener('click', function() {
        localStorage.setItem('background-image', element.src);
        document.querySelector('#bg_popout').style.display = 'none';
        document.body.style.backgroundImage = 'url(' + element.src + ')';
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundAttachment = 'fixed';
    });
});

if (localStorage.getItem('background-image').includes('http')) {
    document.body.style.backgroundImage = 'url(' + localStorage.getItem('background-image') + ')';
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundAttachment = 'fixed';
} else {
    document.body.backgroundImage = 'none';
}
</script>