Changing Page Background

Discussion Ask a question
,
1

I want to change the page background when you hover over a box. I looked into using the $w.Background, but whenever I use the example it gives me the error “background is undefined”.

Code Example:

export function sapphire_mouseIn(event) {
$w(“#page”).background.src = “image://SAPPHIRE.jpeg”;
}

How am I using this background function incorrectly?

2

Never mind, I couldn’t find a solution to the .background thing, but going off of a previous post, it is probably something in the works and not available as of yet. My solution was just to set up a slideshow in the back, so that when you hover of the image, it would change which slide it is on.

3

Hi, you can use the following code to change the background of the page:

$w("Document").background.src = "https://www.w3schools.com/css/trolltunga.jpg";
1 Like
4

Thanks a bunch :slight_smile:

5

Hi Tomer,

is there already any possibilty to change the background.src using a smooth transition?

Thanks : )
Thomas

6

Hi Thomas, not that I know of. Please open a feature request :slight_smile:

7

Hi Tomer! How about changing the page background to a color or reverting back to original page background. For example: I mouseIn on a button and the page background changes, then when i mouseOut it reverts back to original page color. Thanks!!

8

Hi,
You can use the code above and the API to create this effect, change the src on each event to change the background.
for example:

export function column1_mouseIn(event) {
	$w("Document").background.src = "https://www.w3schools.com/css/trolltunga1.jpg";
}

export function column1_mouseOut(event) {
	$w("Document").background.src = "https://www.w3schools.com/css/trolltunga2.jpg";
}

Good luck :slight_smile: