Add a background image

Hello,
I wrote a little custom code to set a backgroun image to one of my softr app

<script>
    document.addEventListener("DOMContentLoaded", function () {
    
document.body.style.backgroundImage = 'url("https://i.postimg.cc/9FmWR50j/blob-haikei-H5.png")';

document.body.style.backgroundRepeat = "no-repeat";
var matches = document.querySelectorAll("section,nav");
var index = 0, length = matches.length;
for ( ; index < length; index++) {
    
        laClass= matches[index].getAttribute("class")
       nouveleClass= laClass.replace("sw-background-color-ffffff", "sw-background-color-transparent");
       matches[index].setAttribute("class",nouveleClass)
}
matches = document.querySelectorAll("div");
var index = 0, length = matches.length;
for ( ; index < length; index++) {
        matches[index].style.backgroundColor = 'rgba(255, 255, 255, 0)';
}

});
</script>

The code sets the backgroud image and sets the others elements to transparency
Exemple : https://tatum266.softr.app/demopublic

Note : try to reduce the window width to see the behaviour of the image.

2022-09-27 07_43_37-Demopublic - made with Softr

3 Likes

This is nice! Thanks for this !