# 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:** 3

<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 11, 2019, 1:34am UTC](https://discourse.processing.org/t/background-image-not-working/14305/41 "2019-11-11T01:34:44Z")

</div>

```auto
boolean over(float x, float y, float w, float h) { 
  if (mouseY > y && mouseY < y + h && mouseX > x && mouse **Y** < x + w) { 
    return true; 
  } 
  return false; 
}

```

is wrong  
also start structuring your code better  
and learn using variables:  
try this code to get the idea:

```auto
int state = 0;

int x1=100, y1=100, w1=250, h1=250; //Button oben links
int x2=1570, y2=100, w2=250, h2=250; //Button oben rechts
int x3=100, y3=730, w3=250, h3=250; //Button unten links
int x4=1570, y4=730, w4=250, h4=250; //Button unten rechts

int x5=80, y5=870, w5=250, h5=100; // Button zurück

void draw_4_button() { // _______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(200,0,0); else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200,0,0); else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200,0,0); else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200,0,0); else stroke(0);
  rect(x4, y4, w4, h4);
}

void draw_zurueck_button() { //_ state 1,2,3
  if ( over(x5, y5, w5, h5) ) stroke(200,0,0); else stroke(0);
  rect(x5, y5, w5, h5);
}

void setup() {
  size(1920, 1080);
  fill(0,0,200);
  strokeWeight(10);
}

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

void draw_4_buttons() {
  draw_4_button();
}

void draw_back_button_and_some_text(int page ) {
  text("some text page "+page,20,20);
  draw_zurueck_button();
}

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w &&
    mouseY > y & mouseY < y + h ) ;
}

```

---

<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 11, 2019, 1:01pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/42 "2019-11-11T13:01:01Z")

</div>

> [@kll](#):
>
> void draw\_4\_buttons() { draw\_4\_button();

what is that for? and i am trying it out now

---

<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 11, 2019, 1:06pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/43 "2019-11-11T13:06:12Z")

</div>

oh i see 😃 why did i not see that?

---

<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 11, 2019, 1:10pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/44 "2019-11-11T13:10:35Z")

</div>

i have written the clicking part know, and i still cant press the bottom part/half of the 3. button.

```auto
int state = 0;

int x1=100, y1=100, w1=250, h1=250; //Button oben links
int x2=1570, y2=100, w2=250, h2=250; //Button oben rechts
int x3=100, y3=730, w3=250, h3=250; //Button unten links
int x4=1570, y4=730, w4=250, h4=250; //Button unten rechts

int x5=80, y5=870, w5=250, h5=100; // Button zurück

void draw_4_button() { // _______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
}

void draw_zurueck_button() { //_ state 1,2,3
  if ( over(x5, y5, w5, h5) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x5, y5, w5, h5);
}

void setup() {
  size(1920, 1080);
  fill(0, 0, 200);
  strokeWeight(10);
}

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

void mousePressed() {

  if ( over(x1, y1, w1, h1) ) {

    state = 1;
  }

  if ( over(x2, y2, w2, h2) ) {

    state = 2;
  }

  if ( over(x3, y3, w3, h3) ) {

    state = 3;
  }

  if ( over(x4, y4, w4, h4) ) {

    state = 4;
  }

  if ( over(x5, y5, w5, h5) ) {

    state = 0;
  }
}

void draw_4_buttons() {
  draw_4_button();
}

void draw_back_button_and_some_text(int page ) {
  text("some text page "+page, 20, 20);
  draw_zurueck_button();
}

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w &&
    mouseY > y & mouseY < y + h ) ;
}

```

---

<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 11, 2019, 1:13pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/45 "2019-11-11T13:13:47Z")

</div>

where is your code?

```auto
if ( over() && state == x ) state = y;

```

you NEEED as button 3 and 5 overlap

you can easy avoid if you move the zurueck button in the middle

---

<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 11, 2019, 1:16pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/46 "2019-11-11T13:16:07Z")

</div>

Its this part:

```auto
void mousePressed() {

  if ( over(x1, y1, w1, h1) && state == 0) {

    state = 1;
  }

  if ( over(x2, y2, w2, h2) && state == 0) {

    state = 2;
  }

  if ( over(x3, y3, w3, h3) && state == 0) {

    state = 3;
  }

  if ( over(x4, y4, w4, h4) && state == 0) {

    state = 4;
  }

  if ( over(x5, y5, w5, h5) && state != 0) {

    state = 0;
  }
}

```

---

<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 11, 2019, 1:17pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/47 "2019-11-11T13:17:03Z")

</div>

look at the code i posted below

```auto
void mousePressed() {

  if ( over(x1, y1, w1, h1) && state == 0) {

    state = 1;
  }

  if ( over(x2, y2, w2, h2) && state == 0) {

    state = 2;
  }

  if ( over(x3, y3, w3, h3) && state == 0) {

    state = 3;
  }

  if ( over(x4, y4, w4, h4) && state == 0) {

    state = 4;
  }

  if ( over(x5, y5, w5, h5) && state != 0) {

    state = 0;
  }
}

```

---

<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:** [November 11, 2019, 1:32pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/48 "2019-11-11T13:32:46Z")

</div>

He suffered enough

Somebody do it for him please

---

<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:** [November 11, 2019, 1:36pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/49 "2019-11-11T13:36:30Z")

</div>

```auto

void mousePressed() {
    
    switch (state) {
    
    case 0:
        if.....
        if.....
        //.....
        break;
        
    case 1:
        //....
        break;
    
    }
}

```

---

<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 11, 2019, 1:37pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/50 "2019-11-11T13:37:39Z")

</div>

but i have written the if over things, what do i do wrong?

---

<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:** [November 11, 2019, 1:38pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/51 "2019-11-11T13:38:39Z")

</div>

In the form you have now better use if… else if… OR return; every time after state=x;

---

<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 11, 2019, 1:39pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/52 "2019-11-11T13:39:34Z")

</div>

```auto
void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) ) state = 1;
    if ( over(x2, y2, w2, h2) ) state = 2;
    if ( over(x3, y3, w3, h3) ) state = 3;
    if ( over(x4, y4, w4, h4) ) state = 4;
  } else {
    if ( over(x5, y5, w5, h5) ) state = 0;
  }
}

```

should work same as the switch???

---

<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:** [November 11, 2019, 1:40pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/53 "2019-11-11T13:40:48Z")

</div>

> [@Ladan](#):
>
> what do i do wrong?

You change state within the function. But then the button gets check on the new state. That’s bad. Therefore you get a double hit on buttons. Use return OR else if

Did you fix over ?

Post your entire code please

---

<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:** [November 11, 2019, 1:42pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/54 "2019-11-11T13:42:07Z")

</div>

> [@kll](#):
>
> should work same as the switch???

This code section looks good now.

You could achieve this with switch but no need.

Does it work now?

Did you fix over() function?

---

<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 11, 2019, 1:43pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/55 "2019-11-11T13:43:42Z")

</div>

> [@Chrisir](#):
>
> Does it work now?

yes, no bounce back here

---

<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 11, 2019, 1:44pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/56 "2019-11-11T13:44:11Z")

</div>

it does, i dont know how, because i did the same thing yesterday and it didnt

---

<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:** [November 11, 2019, 1:45pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/57 "2019-11-11T13:45:16Z")

</div>

Well… you had an error in over() and you had a missing else if construct

I think that’s it

---

<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 11, 2019, 1:45pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/58 "2019-11-11T13:45:52Z")

</div>

Thank you for your help everything is working fine  
@Chrisir  
@kll

---

<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:** [November 11, 2019, 1:46pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/59 "2019-11-11T13:46:53Z")

</div>

> [@kll](#):
>
> void mousePressed() {  
> if ( state == 0 ) {  
> if ( over(x1, y1, w1, h1) ) state = 1;  
> if ( over(x2, y2, w2, h2) ) state = 2;  
> if ( over(x3, y3, w3, h3) ) state = 3;  
> if ( over(x4, y4, w4, h4) ) state = 4; }
> 
> else {
> 
> if ( over(x5, y5, w5, h5) ) state = 0;
> 
> }
> 
> }

Guess this can still go wrong because of missing else if within the main if

Not in this code but:  
when x1 and x3 overlap both buttons would be executed

---

<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:** [November 11, 2019, 1:48pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/60 "2019-11-11T13:48:33Z")

</div>

To close this discussion:

Can you please post your entire code?

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

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