CODEWITHSUNDEEP
javascriptcsswallpaper
sheeta
sheeta

Reputation: 1

how to set custom image to background-image of body element using user property in web wallpaper of wallpaper engine?

body {background-image: url('wallpaper.jpg'); background-size: cover;}

window.wallpaperPropertyListener = {
            applyUserProperties: function(properties) {
                 if (properties.customimage) {
                    var customImageFile = 'file:///' + properties.customimage.value;
                    document.body.style.backgroundImage = `url('${customImageFile}')`;
                }        
            },
        };

this works if i set to img src instead of background-image. when i import image to user property, nothing changes. but when i remove it, background image (default one) disappears.

Upvotes: 0

Views: 64

Answers (1)

Sekh Soaib Haque
Sekh Soaib Haque

Reputation: 61

In the case of the file:/// protocol, you should replace backslashes with forward slashes in the file path.

body {
  background-size: cover;
}

window.wallpaperPropertyListener = {
  applyUserProperties: function (properties) {
    if (properties.customimage) {
      var customImageFile = 'file:///' + properties.customimage.value.replace(/\\/g, '/');
      document.body.style.backgroundImage = `url('${customImageFile}')`;
    }
  },
};

Upvotes: 0

Related Questions