> For the complete documentation index, see [llms.txt](https://electoriaengine.gitbook.io/api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://electoriaengine.gitbook.io/api/engine/background.md).

# Background

## Color

```javascript
Engine_backgroundcolor = "red"//paints the background red
Engine_backgroundcolor = false//does not paint the background 
```

{% hint style="info" %}
For Engine\_backgroundcolor = false;

Since it doesn't colour the background, you can use it as an add-on to obs, for example steamlabs telling subscribers
{% endhint %}

## Animation

{% code title="ingame.html" %}

```html
<div id="backgrounds">
<img id="image-1" src="./test1.png" style="display:none">
<img id="image-2" src="./test2.png" style="display:none">
</div>
```

{% endcode %}

switches to automatic animation in div with "backgrounds" id in ingame.html

{% content-ref url="/pages/Z2kNEkMiVY2lTFcJxHBh" %}
[Onload](/api/engine/onload.md)
{% endcontent-ref %}

{% hint style="info" %}
You can change the transition speed of the animation in onload.js
{% endhint %}

## Map system

### Text and Component

```javascript
backgroundmap({
  dx:500,dy:500,//corner side size
  x:50,y:50//your position in the image
})
```

{% code fullWidth="true" %}

```javascript
{
  backgroundposition:true, //if you add this the object will move when the background moves
  position:Cbacground(10,10)//Adjusts according to the resolution of the image (x,y)
}
```

{% endcode %}

{% hint style="warning" %}
If you want the Cbackground() to run smoothly, put it under editdisplay()&#x20;

After using backgroundmap() starts Cbackground() working
{% endhint %}

{% hint style="danger" %}
inscreen and physics must be turned off
{% endhint %}

### Move example

```javascript
keypress = (key) => {
  if (key === "W" || key == "ARROWUP") {
    backgroundmap({  y:"-8" });
  } else if (key === "S" || key == "ARROWDOWN") {
    backgroundmap({   y: "+8"  });
  } else if (key === "A" || key == "ARROWLEFT") {
    backgroundmap({  x: "-8"  });
  } else if (key === "D" || key == "ARROWRIGHT") {
    backgroundmap({   x: "+8"  });
  }
};
```

<figure><img src="https://644134079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAoN3PvLitJVdWdsmwATH%2Fuploads%2FbOgp7ciAwJf2ujmvVCyr%2FUntitled.png?alt=media&amp;token=dff77005-e78e-45a3-906e-a3f5172eed42" alt=""><figcaption><p>Map system</p></figcaption></figure>

{% embed url="<https://1070416189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAoN3PvLitJVdWdsmwATH%2Fuploads%2Fk5XRqRlcbkU44eh58fxY%2Fmapsystem.mp4?alt=media&token=08f0ba43-9e9b-4fa5-8901-c45b9a68ac33>" %}

## Image

```html
<div id="backgrounds">
<img id="image-1" src="./test1.png" style="display:none">
</div>
```

You only need to enter one picture in this section