HTML Image Background & Table

Ask the community
,
1

Hi Wix Code

Does HTML Components support image background? and can I make table from it?

I saw only background-color not mentioning anything about background-image or url and table.

Thanks,
DA

2

Hi Darken,

It depends on which element you want to change its background, for example you can change strip background but you cannot change it for a basic shape.
The code should look something like this :

$w("#stripBackground").background.src = "http://placehold.it/250x250";

Take a look at the wix Api to see the properties for the elements - Here

Good luck,
Mustafa

3

Hi Mustafah

I am asking for html background and I have tried your sample code but it is not working for html.
I can only change the background color but cant change it to image background.

Hope to have your best advice/ idea on how to solve this.

Thanks a lot,
DA

4

Hi!

Is your intention to change the entire page’s background?
If so - take a look at this .
The ‘component’ $w.Document refers to the complete web page, which consists of a Header, Page, and Footer.
Changing its .background.src will result in changing the entire page’s background to the specified image.

In the following example you can see a code for changing background based on a gallery of images stored in a database collection.

$w.onReady(function () {
  wixData.query("Gallery1").find()
    .then( (results) => {
       let images = results.items;
       let currentImageIndex = 0;
       setInterval(function(){
         $w("Document").background.src = images[currentImageIndex % images.length].image;
         currentImageIndex++;
       }, 5500);
     })
     .catch( (err) => {
        console.log('err', err);
     });
 });

As for a table in the background - as far as I know, it is not possible and also from a user perspective not very useful or comfortable (tables usually present data and should be in the front of the layout).
What you can do is as Mustafa said, use a strip and change it however you like.

Hope it helps!

Doron. :slight_smile: