This would be cool to make pages exta dynamic.
2 Likes
You can set the background of different elements in the site, including the background of each column in a strip, with code.
For example:
//Set the background of a column
$w("#column1").background.src = "http://placehold.it/250x250";
You can read more in the API reference.
You can get an image URL from the current item of a dataset and use it to set the background. See more information in the dataset API reference.
Great technique! I’ll try that out!
Hey Jonathan, Did you get this to work? I’m struggling to do this. I guess the part I’m stuck on is what is the source of the image? What do I replace the “http://placehold.it…” with to get my images in the dataset to appear.
$w(“#column1”).background.src = “http://placehold.it/250x250”; I may need to have it spelled out for me I guess…lol!
Hi Lorraine,
Assuming the inner element in the strip is called ‘column1’, your dataset is still called ‘dynamicDataset’, and the field you’re getting from the dataset is called ‘coverImage’, the following code should work.
It basically waits for the dataset to be ready, then gets the current item from it, accesses the field called coverImage, and pushes it into the background src.
$w.onReady(function () {
$w("#dynamicDataset").onReady(function(){
$w('#column1').background.src = $w('#dynamicDataset').getCurrentItem().coverImage;
});
});
You reference by ID not the collectionname. So if you goto to tools and view properties for the added dataset you will most probably see dynamicDataset or dataset1 as the id and that is what you will use.
I updated my ID to “dynamicDataset”, but the background image is still not pulling from the database, and I am getting a new error (“background” is undefined)—see attached screenshots.
If columns11 is the id of the Strip itself you mst reference the column inside the strip to assign a background. There is no background property on the strip itself.
So click on the column and get the id of the column, I guess columns11 is the strip id and not the column1 as they tend to be named singularis.
$w(‘#column1’).background.src = $w(‘#dynamicDataset’).getCurrentItem().coverImage;
One of the Wix support teams gave me an answer (also said their is a bug that is being reported to developers):
$w.onReady(function () {
$w(“#dynamicDataset”).onReady(function(){
$w(‘#column20’).background.src = $w(‘#dynamicDataset’).getCurrentItem().image;
});
});
#column20 is the id for appropriate column on top strip. You cant find it anywhere on page, i found it with a method of substracting (tried all columns which appear in autocomplete). This is a problem by the way, i’m reporting it to development (no column id if strip has only 1 column)
I’ve been off here for a while, but great to see lots of discussion around this topic.
I tried the code that you guys have shown but with no luck.
As an alternative, I have used a full-width slideshow and plugged that into the database and that has been a great alternative. Still no parallax effects though.
This is a very useful discussion!
Would you say that if I want to change only color background (not image), I can use a small tile to tile it all over? Or is there any way to use the color ID?
How would both cases look like on the code?
( I have about 35 pages that differs from each other in color. I could do it without code, but then it has to be in two more languages, so it’s really too much…)
Could someone from Wix answer the post above mine please? I also want to change the background colors of containers in repeaters.
I can show here what I did:
This is the collection table:
This is the code :
You just need to
1.Prepare swatches for colors (100X100 px image that you upload as any other image)
2.Set the columns background to “image”, in “tile” mode (it tiles automatically, but in this way you can control transparency as well)
3.Use your own correct names for everything
You can use this only for columns and not for strips. if you need a whole strip - divide it into columns.
Good luck! 
Hi,
You could now connect the strip and columns background to images from your collection with no code.
Shay
Wow! Cool!
This is really useful! :)))
How can I use a color code like we do with background for boxes?
I don’t think you can. Only changing the source. Its a real pain in the rear. I need to be able to change the strip background on the fly and loading an external image causes a blip which isnt nice. Are there any other elements which can stretch 100% width of the column that I could hide and show to do this ?