# Dynamic Page background Color Change

**URL:** <https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [June 19, 2020, 10:00pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555 "2020-06-19T22:00:05Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 19, 2020, 10:00pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/1 "2020-06-19T22:00:05Z")

</div>

I have a dynamic page and would like to set a different background color for each page-

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 19, 2020, 10:11pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/2 "2020-06-19T22:11:15Z")

</div>

Hello kojo.nyaro,

i see no option to set the page-color by code…  
[https://www.wix.com/corvid/reference/$w.Page.html](https://www.wix.com/corvid/reference/$w.Page.html)

But what you could do by code is, to insert a stripe or a box/container.  
Then it could be possible to change color in a specific area.

In this case, it is the BOX, where you can change the color and use it as background…  
[https://www.wix.com/corvid/reference/$w.Box.html#style](https://www.wix.com/corvid/reference/$w.Box.html#style)

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 19, 2020, 10:17pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/3 "2020-06-19T22:17:23Z")

</div>

Thanks. I see this code  
let bgColor = $w(“#myElement”).style.backgroundColor;

But how do I get the code to use the color code in the database for the box? (Am new to coding) I don’t see code to insert dataset.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 19, 2020, 10:32pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/4 "2020-06-19T22:32:19Z")

</div>

You can not insert DATASET by code, or it would be new to me, that this is possible. You have to put in the dataset manualy (yes i know a big disatvantage of Wix).

Put in manually a dataset and connect it to the data-collection (database) you want.

And here the BOX.style-code…  
[https://www.wix.com/corvid/reference/$w.Box.html#style](https://www.wix.com/corvid/reference/$w.Box.html#style)

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 19, 2020, 11:08pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/5 "2020-06-19T23:08:20Z")

</div>

![](https://us1.discourse-cdn.com/wix/original/3X/f/8/f8263b91fc91336b9a7bcf8e0b56e70ac7bb34cd.png)  
Thanks… But this works when you are defining the color in a static page-My page is dynamic, I want to store the color RGB code in the database and have the bgcolor change depending on the dynamic page I am on. I want the history box bg color to change everytime the page changes

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [June 19, 2020, 11:18pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/6 "2020-06-19T23:18:14Z")

</div>

Use Document if you want to do the whole page.  
[https://www.wix.com/corvid/reference/$w.Document.html](https://www.wix.com/corvid/reference/$w.Document.html)  
A complete web page, which consists of a Header, Page, and Footer.

```javascript
$w('Document').background.src = //rest of code

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 19, 2020, 11:18pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/7 "2020-06-19T23:18:29Z")

</div>

No problem, all you have to do is to get the data out of the current row-data.  
This is able in 2-ways —\> dataset or data-collection - code.

How i imagine the scenario.

You have dynamic page. On that page for example you have a button.  
By pressing that button you will be redirected for example to next dynamic page.

But what is a dynamic page?  
It is just the reflection of your database wich is connected trough (with) a dataset.

Sooooooo, after clicking or by clicking on that button you can ask the —\> dataset for example for “currentItem”. When you got your “currentItem”, you should be able to get the right row and column of the database.  
Now you are able to find the right data.  
I think the rest you will do by yourself.

In the last reference (column) of your database, you have for example your COLOR-HEX-CODES.

So just ask for the last ROW of the CURRENT-ITEM-DATA.

That should be possible.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 19, 2020, 11:23pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/8 "2020-06-19T23:23:28Z")

</div>

Background-COLOR or background-IMAGE?  
What now? 😁😂 —\> i’m confused

The topic was…

" Dynamic Page background Color Change"

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 19, 2020, 11:24pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/9 "2020-06-19T23:24:17Z")

</div>

Thanks Russian Dima, unfortunately I am not a coder, but I can make changes to the code if its available… An example will be nice…Thanks…

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 19, 2020, 11:35pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/10 "2020-06-19T23:35:00Z")

</div>

I would say, all you have to know, is how to get information out of the Database by code and how to find the current item in it.

For example, look here…  
[https://russian-dima.wixsite.com/wixworld/blank-6](https://russian-dima.wixsite.com/wixworld/blank-6)  
…this example was maden just a few minutes ago for someone other in this post…  
[https://www.wix.com/corvid/forum/community-discussion/how-can-i-live-count-row-from-database](https://www.wix.com/corvid/forum/community-discussion/how-can-i-live-count-row-from-database)  
(you can also find the Link at page)

It could be useful for your learning-process.  
Very similar to your purpose/ inquiry.

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 20, 2020, 12:46pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/11 "2020-06-20T12:46:03Z")

</div>

This is the code I managed to put together, I am not getting any errors in the console but box color does not change.

$w.onReady( function () {

```
 $w( "#dynamicDataset" ).onReady( () =>  
 let currentItem = $w( "#dynamicDataset" ).getCurrentItem(); 
    $w( "#box2" ).style.bgColor = { 

```

“bgColor” :currentItem.bgColor,  
“description” : currentItem.location,  
};

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/b/4bd3bd18bae4870aefe17c3eca6b8c1d606024dd.jpeg)

```
}); 

```

});

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 20, 2020, 3:07pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/12 "2020-06-20T15:07:40Z")

</div>

This is the code I have so far, I am not getting any errors in the console but the box color remains the same…

$w.onReady( function () {

```
 $w( "#dynamicDataset" ).onReady( () => { 

```

let currentItem = $w( “#dynamicDataset” ).getCurrentItem();  
$w( “#box2” ).style.bgColor = {

“bgColor” :currentItem.bgColor,  
“description” : currentItem.location,  
};

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/b/4bd3bd18bae4870aefe17c3eca6b8c1d606024dd.jpeg)

```
}); 

```

});

---

<div class="post-metadata">

**Author:** ![kojonyarko](https://avatars.discourse-cdn.com/v4/letter/k/cab0a1/32.png) [@kojonyarko](https://forum.wixstudio.com/u/kojonyarko)\
**Post date:** [June 20, 2020, 3:14pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/13 "2020-06-20T15:14:54Z")

</div>

This is the code I have so far, I am not getting any errors in the console but the box color remains the same…

$w.onReady( function () {  
$w( " [#dynamicDataset](https://www.wix.com/corvid/forum/search/~num~dynamicDataset) " ).onReady( () =\> {

let currentItem = $w( " [#dynamicDataset](https://www.wix.com/corvid/forum/search/~num~dynamicDataset) " ).getCurrentItem(); $w( " [#box2](https://www.wix.com/corvid/forum/search/~num~box2) " ).style.bgColor = { “bgColor” :currentItem.bgColor,

“description” : currentItem.location,

};  
});  
});

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/b/4bd3bd18bae4870aefe17c3eca6b8c1d606024dd.jpeg)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 20, 2020, 9:19pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/14 "2020-06-20T21:19:11Z")

</div>

Ok kojo, i think i have a solution for you…(some different, but works for me).

```javascript
import wixData from 'wix-data';
var Item
var ItemIndex

$w.onReady(() => {
  $w('#dynamicDataset').onReady(() => {
        Item = $w('#dynamicDataset').getCurrentItem();
        ItemIndex = $w('#dynamicDataset').getCurrentItemIndex();
 let targetId = $w("#dynamicDataset").getCurrentItem()._id;
        console.log(Item)
        console.log(ItemIndex)
        console.log("Item-ID: " + targetId)
        get_currentItemData(targetId)
    });
});

function get_currentItemData (parameter) {
    wixData.get("Database1", parameter)
    .then( (results) => {
 let item = results; //see item below
        console.log(item)
        console.log(item.floor)
        console.log(item.additional)
        console.log(item.bedroom)
        console.log(item.squarespace)
 let myBGcolor = results.color
        console.log(results.color)

        $w('#box1').style.backgroundColor=myBGcolor
    } )
}

export function button1_click(event) {get_currentItemData()}

```

Here you will find an example…  
[https://russian-dima.wixsite.com/meinewebsite-5/database1/Одноэтажный-дом](https://russian-dima.wixsite.com/meinewebsite-5/database1/%D0%9E%D0%B4%D0%BD%D0%BE%D1%8D%D1%82%D0%B0%D0%B6%D0%BD%D1%8B%D0%B9-%D0%B4%D0%BE%D0%BC)

Look also into the console.logs (Press F12 on your keayboard in google-chrome-browser —\> CONSOLE)

The name of DATABASE in this example is —\> “Database1”  
The name of the dynamic-dataset is —\> “#dynamicDataset”

* * *

 ![](https://us1.discourse-cdn.com/wix/original/3X/6/c/6c858bc8096f40dbdb8d6f07b3dbb22f1a59a627.png)  
In the last row of this DATABASE you have the RGBA-Colors for each item-ID.  
I hope you understand the rest.

You can DELETE all the CONSOLE-LOGS if you do not need them anymore,  
then you have a small and better readable code like this…

```javascript
import wixData from 'wix-data';
var Item
var ItemIndex

$w.onReady(() => {
  $w('#dynamicDataset').onReady(() => {
        Item = $w('#dynamicDataset').getCurrentItem();
        ItemIndex = $w('#dynamicDataset').getCurrentItemIndex();
 let targetId = $w("#dynamicDataset").getCurrentItem()._id;
        get_currentItemData(targetId)
    });
});

function get_currentItemData (parameter) {
    wixData.get("Database1", parameter)
    .then( (results) => {
 let item = results; //see item below
 let myBGcolor = results.color
        $w('#box1').style.backgroundColor=myBGcolor
    } )
}

export function button1_click(event) {get_currentItemData()}

```

---

<div class="post-metadata">

**Author:** ![mslkloos](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mslkloos/32/22089_2.png) [@mslkloos](https://forum.wixstudio.com/u/mslkloos)\
**Post date:** [August 14, 2021, 8:01pm UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/15 "2021-08-14T20:01:53Z")

</div>

Hey Kojo,  
Dis you ever figure this out. I’m trying to do the same thing.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 15, 2021, 3:54am UTC](https://forum.wixstudio.com/t/dynamic-page-background-color-change/32555/16 "2021-08-15T03:54:53Z")

</div>

@mslkloos  
The only way to set the background-color of your page is…

[https://www.wix.com/velo/reference/$w/document/background](https://www.wix.com/velo/reference/$w/document/background)

```javascript
let myBackgroundImage = 
"wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
$w("Document").background.src = myBackgroundImage;

```

It’s not directly the property of background-color of your page, it’s a back-ground-image-source, where you can place an image for background.

Take a completely black image (big enough) and add it to → “src” (as SOURCE).