# Background(image) not working

**URL:** <https://discourse.processing.org/t/background-image-not-working/14305>\
**Category:** Coding Questions\
**Created:** [September 30, 2019, 6:32am UTC](https://discourse.processing.org/t/background-image-not-working/14305 "2019-09-30T06:32:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [September 30, 2019, 6:32am UTC](https://discourse.processing.org/t/background-image-not-working/14305/1 "2019-09-30T06:32:27Z")

</div>

I have written this code:

```auto
void Setup(){

size(1920, 1080);
PImage img;
img = loadImage("desktop-wallpaper-9.jpg");
background(img);
  
}

```

and it just opens this window:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5bae29ffc8e082f1025cc47830ab43eac47254e.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 30, 2019, 6:34am UTC](https://discourse.processing.org/t/background-image-not-working/14305/2 "2019-09-30T06:34:49Z")

</div>

try

```auto
void setup(){

```

and the picture must fit in size…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 30, 2019, 6:34am UTC](https://discourse.processing.org/t/background-image-not-working/14305/3 "2019-09-30T06:34:53Z")

</div>

> [@Ladan](#):
>
> `void Setup() {`

It’s `void setup() {`, not `void Setup() {`: 😉

> **[setup() / Reference](https://processing.org/reference/setup_.html)**
>
> The setup() function is run once, when the program starts. It's used to define initial environment properties such as screen size and to load media such as images and fonts as the program start…

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [September 30, 2019, 7:24am UTC](https://discourse.processing.org/t/background-image-not-working/14305/4 "2019-09-30T07:24:44Z")

</div>

thanks! that worked! but now i am trying to to make a rectangle that changes its colour to red if you click it, but if i click it nothing happens:

```auto

void setup(){
  
PImage img = loadImage("Lodo army text mit streifen.png");
size(1920, 1080);
background(img);
  
  rect(100, 100, 500, 500);
  
}

void Draw(){
 
  if(mouseY > 100 && mouseY < 600){
    
    if(mousePressed){
      fill(255, 0, 0);
      rect(100, 100, 500, 500);
      
    }
    
  }
  
}

```

the image is just so big, because my screen is smaller than full hd just ignore it

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/42d9d2af378802712a69b17795b77ae8a3fb49bb.png)

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 30, 2019, 8:09am UTC](https://discourse.processing.org/t/background-image-not-working/14305/5 "2019-09-30T08:09:10Z")

</div>

Again, don’t use capital letters in functions 😛😛

`void draw(){`

😀😀

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 30, 2019, 10:16am UTC](https://discourse.processing.org/t/background-image-not-working/14305/6 "2019-09-30T10:16:49Z")

</div>

Processing is case sensitive

draw()

Also, you want the rect command outside the if clause

Also, the color is permanently; to change this set the original color before if, so it’s always restored

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [September 30, 2019, 12:59pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/7 "2019-09-30T12:59:27Z")

</div>

i thought, that i had to do that in that one xd, thanks

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 1, 2019, 3:38pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/8 "2019-10-01T15:38:04Z")

</div>

another question: i want to get Buttons(the rectangles) that disappear when you click them, so i can show text if you click them, but when i click one of them, all of them turn red, why? they turn red, because i want them to change colour before they disappear btw

```auto

boolean InButtonSelection = true;

void setup() {

  PImage img = loadImage("Lodo army text mit streifen.png");
  size(1920, 1080);
  background(img);

  //Button oben links
  fill(0);
  rect(100, 100, 250, 250);
  //Button oben rechts
  rect(1570, 100, 250, 250);
  //Button unten links
  rect(100, 730, 250, 250);
  //Button unten rechts
  rect(1570, 730, 250, 250);
}

void draw() {
  //Button oben links
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 100 && mouseY < 350 && mouseX > 100 && mouseX < 350 ) {

        fill(255, 0, 0);
        rect(100, 100, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(100, 100, 250, 250);
      }
    }else{
      
      tint(0, 0);
      rect(100, 100, 250, 250);
      InButtonSelection = false;
      
  }

  //Button oben rechts
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 100 && mouseY < 350 && mouseX > 1570 && mouseX < 1820 ) {

        fill(255, 0, 0);
        rect(1570, 100, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);       
        rect(1570, 100, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(1570, 100, 250, 250);
      InButtonSelection = false;
      
    }
  }

  //Button unten links
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 730 && mouseY < 980 && mouseX > 100 && mouseX < 350 ) {

        fill(255, 0, 0);
        rect(100, 730, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(100, 730, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(100, 730, 250, 250);
      InButtonSelection = false;
      
    }
  }

  //Button unten rechts
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 730 && mouseY < 980 && mouseX > 1570 && mouseX < 1820 ) {

        fill(255, 0, 0);
        rect(1570, 730, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(1570, 730, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(1570, 730, 250, 250);
      InButtonSelection = false;
      
    }
  }
}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 2, 2019, 6:29am UTC](https://discourse.processing.org/t/background-image-not-working/14305/9 "2019-10-02T06:29:30Z")

</div>

Good work here!

Good idea to use InButtonSelection as a variable

**Remarks:**

I ignore the idea to turn red and then off. Only going red for the moment.

No use to draw stuff in the function setup(). Draw stuff only in the function draw(). Use background at start of draw() so rects gets drawn throughout again and again fresh.

when you wan to see the buttons throughout you must draw them outside the if-clause (`if (mousePressed)`). Otherwise they appear only briefly (when use background at start of draw() ). To achieve this you could have separate color variables for each button and store its color therein.

when you want to change each button separately, InButtonSelection must be separate for each button. So use InButtonSelection1, InButtonSelection2, InButtonSelection3, InButtonSelection4

Do you want it possible to change them back and forth? Then you have to change the if-clauses :

```auto
    if (mouseY > 100 && mouseY < 350 && mouseX > 100 && mouseX < 350 ) {
      if (InButtonSelection1) {

```

Important: with mousePressed used as a variable, each mouse press gets registered multiple times. Bad in your case. (good for drawing continously).

- When you use mousePressed() as **function** each mouse press gets registered only **once**. Better

Code example below.

Chrisir

```auto

boolean InButtonSelection1 = true;

void setup() {
  size(1920, 1080);
  background(222);
}

void draw() {
  background(222);

  // evaluate InButtonSelection1 
  if (InButtonSelection1) {
    fill(255, 0, 0);
    rect(100, 100, 250, 250);
  } else {
    fill(0);
    rect(100, 100, 250, 250);
  }
}

void mousePressed() {

  // set InButtonSelection1
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    // toggle InButtonSelection1
    if (InButtonSelection1) {
      InButtonSelection1 = false;
    } else {
      InButtonSelection1 = true;
    }
  }//if
  //
}
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 2, 2019, 6:31am UTC](https://discourse.processing.org/t/background-image-not-working/14305/10 "2019-10-02T06:31:04Z")

</div>

Now when you want to go from black to red button to off, you could make a int variable for each button that can be 0, 1 or 2.

The state 0 would signify black,  
1 red,  
2 off.

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 21, 2019, 8:22am UTC](https://discourse.processing.org/t/background-image-not-working/14305/11 "2019-10-21T08:22:04Z")

</div>

ok that works but I wanted to let the button/s disappear when clicked and a text to appear. Also, a back button has to appear. If the back button is clicked, i want the other button/s to appear again. How should I do that

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 21, 2019, 9:38am UTC](https://discourse.processing.org/t/background-image-not-working/14305/12 "2019-10-21T09:38:04Z")

</div>

> [@Chrisir](#):
>
> Now when you want to go from black to red button to off, you could make a int variable for each button that can be 0, 1 or 2.
> 
> The state 0 would signify black,  
> 1 red,  
> 2 off.

This is the idea for your question

Chrisir

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 5, 2019, 7:01am UTC](https://discourse.processing.org/t/background-image-not-working/14305/13 "2019-11-05T07:01:15Z")

</div>

i have literaly no idea how to do that.

can you write an example?

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 5, 2019, 7:09am UTC](https://discourse.processing.org/t/background-image-not-working/14305/14 "2019-11-05T07:09:46Z")

</div>

i just go this:

```auto
boolean InButtonSelection1 = true;

void setup() {
  size(1920, 1080);
  background(222);
}

void draw() {
  background(222);

  // evaluate InButtonSelection1 
  if (InButtonSelection1) {
    fill(255, 0, 0);
    rect(100, 100, 250, 250);
  } else {
    fill(222);
    stroke(222);
    rect(100, 100, 250, 250);
  }
}

void mousePressed() {

  // set InButtonSelection1
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    // toggle InButtonSelection1
    if (InButtonSelection1) {
      InButtonSelection1 = false;
    } else {
      InButtonSelection1 = true;
    }
  }//if
  //
}
//

```

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 5, 2019, 7:25am UTC](https://discourse.processing.org/t/background-image-not-working/14305/15 "2019-11-05T07:25:38Z")

</div>

basically i want to have 4 buttons on the screen, if you click one, all buttons disappear and a text and a “back button” appear. If you click the back button, the buttons of the beginning should appear. I absolutely dont know how to do that.  
@Chrisir

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 5, 2019, 8:01am UTC](https://discourse.processing.org/t/background-image-not-working/14305/16 "2019-11-05T08:01:30Z")

</div>

hi Ladan,  
i just did a kind of button tutorial  
what actually starts from a working

- hardcoded toggle button
- to a button function
- a array of parameters using this function
- a array of button class.

something like this might help to learn and develop  
but if i give you just the whole thing it might be too much.  
at the end of [this](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166)  
is a link for the JAVA code  
the lesson for your next step might be in JEOPARDY\_kll\_008\l\_2.pde

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 5, 2019, 8:22am UTC](https://discourse.processing.org/t/background-image-not-working/14305/17 "2019-11-05T08:22:41Z")

</div>

it teaches me how to create buttons, but can you explain, how i can do, what i want to do?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 5, 2019, 8:27am UTC](https://discourse.processing.org/t/background-image-not-working/14305/18 "2019-11-05T08:27:12Z")

</div>

like you say,

- 4 buttons on page 0
- 1 button on page 1

so there you need a

```auto
int state = 0

void draw() {
  background(200,0,200);
  if ( state == 0 ) draw_4_buttons();
  if ( state == 1 ) draw_back_button_and_some_text();
}

```

and the button action must change the state variable.

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 10, 2019, 1:07pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/19 "2019-11-10T13:07:01Z")

</div>

thanks, that really helped me and everything is working fine, expect one thing.

If i click the bottom half of the button on the bottom left corner, nothing happens.

that is the spot, where the back button is btw.

```auto
void setup() {

  size(1920, 1080);
  background(222);
}

color blue = color(3, 182, 252);
color grey = color(222);
color black = color(0);
int state = 0;

public void draw_4_buttons() {

  fill(0);
  rect(100, 100, 250, 250);
  //Button oben rechts
  rect(1570, 100, 250, 250);
  //Button unten links
  rect(100, 730, 250, 250);
  //Button unten rechts
  rect(1570, 730, 250, 250);
}

void draw_back_button_and_some_text1() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen1", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);

  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}

void draw_back_button_and_some_text2() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen2", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);

  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}

void draw_back_button_and_some_text3() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen3", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);

  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}

void draw() {
  background(222);
  if ( state == 0 ) draw_4_buttons();
  if ( state == 1 ) draw_back_button_and_some_text1();
  if ( state == 2 ) draw_back_button_and_some_text2();
  if ( state == 3 ) draw_back_button_and_some_text3();

  //button oben links wird gedrückt
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    if (mousePressed) {

      state = 1;
    }
  }

  //button oben rechts wird gedrückt
  if (mouseY > 100 && mouseY < 350 && 
    mouseX > 1570 && mouseX < 1820 ) {

    if (mousePressed) {

      state = 2;
    }
  }

  //button unten links wird gedrückt

  if (mouseY > 730 && mouseY < 980 && 
    mouseX > 100 && mouseX < 350 ) {

    if (mousePressed) {

      state = 3;
    }
  }

  //zurück button wird gedrückt
  if (mouseY > 870 && mouseY < 970 && 
    mouseX > 80 && mouseX < 330) {

    

      if ( state != 0 ) {

        if(mousePressed){
          
          state = 0;
          
        }
        
        
      }
      
      
      
      
    
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 10, 2019, 1:14pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/20 "2019-11-10T13:14:54Z")

</div>

-a- the button thing you might clean up,  
possibly use functions

- boolean over(x,y,w,h){}
- draw\_button(x,y,w,h){}

-b- having the button check inside draw  
and using hardcoded over for all 5 buttons does not work,  
as you must have some add logic like

```auto
if ( over(x5,y5,w5,h5) && state > 0 ) { // back button pressed
}

```

[Next page](https://discourse.processing.org/t/background-image-not-working/14305.md?page=2)