Add a background image

Custom Coding
1

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

4 Likes
2

This is nice! Thanks for this !

3

How might this updated for a specific block? I want to have a custom background image for a specific block rather than the whole page or app

4

has this last post been seen?
I think it would be great to get this code for a specific block!

5

Hello,
you can use this simple CSS to add a background image on a specific block. Will work for most of the blocks with version 3.0.0 +

<style>
#YOUR_BLOCK_ID> section {
    background: url(YOUR_IMAGE_URL);
    background-size: cover;
    background-position: center;
}
</style>
2 Likes
6

@jerome.chabaud

Appreciate it’s been over a year since you posted this.

The script works lovely thank you!

Would it be possible to remove the transparency option ? I have a search bar on the page which is being majorly washed out and you can’t read the text within it. I have tried to set the colours on the search bar but this seems to be overwritten by the transparency part of the script.

Thanks,
Jack

7

@jerome.chabaud the can you provide a URL for me to check?