# Adding a background image to a code

**URL:** <https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533>\
**Category:** Coding Questions\
**Created:** [July 6, 2018, 12:05am UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533 "2018-07-06T00:05:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Theothecat](https://avatars.discourse-cdn.com/v4/letter/t/8edcca/32.png) [@Theothecat](https://discourse.processing.org/u/Theothecat)\
**Post date:** [July 6, 2018, 12:05am UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533/1 "2018-07-06T00:05:46Z")

</div>

I’m new to proccesing, I have a code that I made, and I’m wondering how to set the background to a image, all the attempts that I did failed.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [July 6, 2018, 12:09am UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533/2 "2018-07-06T00:09:12Z")

</div>

Can we see the code of your best attempt(s)?

You will probably need to load the image from a file and use `loadImage()`.

You will load the image into a `PImage` object.

You can draw the background as an image with either `image()` or `background()`.

---

<div class="post-metadata">

**Author:** ![Theothecat](https://avatars.discourse-cdn.com/v4/letter/t/8edcca/32.png) [@Theothecat](https://discourse.processing.org/u/Theothecat)\
**Post date:** [July 6, 2018, 11:51pm UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533/3 "2018-07-06T23:51:40Z")

</div>

Here is the code:

```auto
int quantity = 300;
float [] xPosition = new float[quantity];
float [] yPosition = new float[quantity];
int [] flakeSize = new int[quantity];
int [] direction = new int[quantity];
int minFlakeSize = 1;
int maxFlakeSize = 5;

PImage bg; 

void setup() 
{
  size(800, 350);
  background(11, 37, 79);
  frameRate(30);
  noStroke();
  smooth();
  bg = loadImage("simply_snow_backround.png");
  
  for(int i = 0; i < quantity; i++) {
    flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));
    xPosition[i] = random(0, width);
    yPosition[i] = random(0, height);
    direction[i] = round(random(0, 1));
}

void draw() 
{
  background(bg);

  for(int i = 0; i < xPosition.length; i++) {
    
    ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);
    
    if(direction[i] == 0) {
      xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    } else {
      xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    }
    
    yPosition[i] += flakeSize[i] + direction[i]; 
    
    if(xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {
      xPosition[i] = random(0, width);
      yPosition[i] = -flakeSize[i];
    
    
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [July 7, 2018, 12:10am UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533/4 "2018-07-07T00:10:42Z")

</div>

What do you expect this code to do? What does it do instead?

Can you try to start with a simpler sketch that just shows a background and nothing else? Then add one thing at a time.

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 12:11pm UTC](https://discourse.processing.org/t/adding-a-background-image-to-a-code/1533/5 "2018-07-07T12:11:17Z")

</div>

```auto
int quantity = 300;
float [] xPosition = new float[quantity];
float [] yPosition = new float[quantity];
int [] flakeSize = new int[quantity];
int [] direction = new int[quantity];
int minFlakeSize = 1;
int maxFlakeSize = 5;

PImage bg; 

void setup() 
{
  size(800, 350);
  background(11, 37, 79);
  frameRate(30);
  noStroke();
  smooth();
  bg = loadImage("Snow-Background.png");

  for (int i = 0; i < quantity; i++) {
    flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));
    xPosition[i] = random(0, width);
    yPosition[i] = random(0, height);
    direction[i] = round(random(0, 1));
  }
}

void draw() 
{
  image(bg,0,0);

  for (int i = 0; i < xPosition.length; i++) {

    ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);

    if (direction[i] == 0) {
      xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    } else {
      xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, .1, .5);
    }

    yPosition[i] += flakeSize[i] + direction[i]; 

    if (xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {
      xPosition[i] = random(0, width);
      yPosition[i] = -flakeSize[i];
    }
  }
}

```

Try this. You need not to use `background(bg)` use `image(bg,0,0)` instead your program produced beautiful visuals. If you use random ice crystal sprites it would be more beautiful.