# Move background

**URL:** https://discourse.processing.org/t/move-background/16818
**Category:** Coding Questions
**Created:** [January 2, 2020, 7:28pm UTC](https://discourse.processing.org/t/move-background/16818 "2020-01-02T19:28:56Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![nati1704](https://avatars.discourse-cdn.com/v4/letter/n/c57346/32.png) [@nati1704](https://discourse.processing.org/u/nati1704)
#### Post date: [January 2, 2020, 7:28pm UTC](https://discourse.processing.org/t/move-background/16818/1 "2020-01-02T19:28:56Z")

</div>

Hi  
I try to make a little game where the background has to move.

I´ve made an own background with photohop beforehand, which has a larger width than the sketch.

Now I wanted to know HOW can I insert an photo,which has not the same sizes as the sketch.  
And if my figure moves too far to the right, the background moves as well

Can somebody help?

Thank you.

---

<div class="post-metadata">

### Author: ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [January 2, 2020, 7:46pm UTC](https://discourse.processing.org/t/move-background/16818/2 "2020-01-02T19:46:10Z")

</div>

Hi Nati, welcome to the forum.

You can use [loadImage](https://processing.org/reference/loadImage_.html) to load images in your sketch. In the example on that page they use `0, 0` to indicate the image’s location. You could replace these with global variables.

Without seeing any code it’s hard to give good advice however, so if you already made a start on your sketch don’t be shy to share it with us (or a minified version of it). Keep in mind that if you share the code and it uses an image, is that you add the image so we can test it.

---

<div class="post-metadata">

### Author: ![anon68884268](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@anon68884268](https://discourse.processing.org/u/anon68884268)
#### Post date: [January 3, 2020, 9:39am UTC](https://discourse.processing.org/t/move-background/16818/3 "2020-01-03T09:39:18Z")

</div>

Hello,  
i know the problem, because i often developed small scroll games, and for normal you give your class, which represents the whole ‘level’ an PVector ‘shift’. If you aren’t working with classes, it should be possible to create a global variable for this.  
A little example what i mean:

```auto
PVector shift;
PImage background;

void setup() {
  shift = new PVector(0, 0); // The start of the background (upper-left corner)
  background = loadImage("background.png"); // Or whatever your background is
}

void draw() {
  background(255); // Is actually not needed because you have an image.
  image(background, shift.x, shift.y);
}

void keyPressed() {
  if (key == 'a') {
    shift.x += 1;
  } else if(key == 'd') {...
}

```

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [January 4, 2020, 4:09am UTC](https://discourse.processing.org/t/move-background/16818/4 "2020-01-04T04:09:15Z")

</div>

The keyword is panning. Here are some relevant posts:

- [https://forum.processing.org/two/discussion/5985/how-can-a-roguelike-have-so-large-maps#latest](https://forum.processing.org/two/discussion/5985/how-can-a-roguelike-have-so-large-maps#latest)
- [https://forum.processing.org/two/discussion/4945/zooming-and-panning/p1](https://forum.processing.org/two/discussion/4945/zooming-and-panning/p1)
- [https://forum.processing.org/two/discussion/1364/constraining-an-image-while-panning-and-zooming](https://forum.processing.org/two/discussion/1364/constraining-an-image-while-panning-and-zooming)
- [https://forum.processing.org/two/discussion/20813/zooming-and-panning-headache#latest](https://forum.processing.org/two/discussion/20813/zooming-and-panning-headache#latest)
- [https://forum.processing.org/two/discussion/20853/scale-translate-ab-comparission#latest](https://forum.processing.org/two/discussion/20853/scale-translate-ab-comparission#latest)
- [https://forum.processing.org/two/discussion/24488/having-issues-with-dragging-when-creating-a-map#latest](https://forum.processing.org/two/discussion/24488/having-issues-with-dragging-when-creating-a-map#latest)

Kf
