# 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:** 14\
**Page:** 4

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

</div>

allow me one more comment,

i had a hard time testing your code,  
as i am used to put in lots of  
`println(" function name: variable name: "+variable);`  
when i code ( combined with a global switch to enable/disable this diagnostic )

so i get little bit angry when i must run  
fullscreen code and can not see the console.

actually i just see the bounce after i used that printing ( for state \> 0 )  
AND take out -1000 from your screen / button x settings  
to see both windows.

---

<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, 2:00pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/62 "2019-11-11T14:00:54Z")

</div>

oh okay i will do that next time;  
by the way, this has to work on a touchscreen, will it?

and how do i get it out of the window to fullscreen?

---

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

</div>

for sure:

```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 == 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();
  if ( state == 4 ) draw_back_button_and_some_text4();
}

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;
  }
}

void draw_4_buttons() {
  draw_4_button();
}

void draw_back_button_and_some_text1() {
  text("some text page1 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text2() {
  text("some text page2 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text3() {
  text("some text page3 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text4() {
  text("some text page4 ", 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, 2:06pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/64 "2019-11-11T14:06:41Z")

</div>

> **[fullScreen() / Reference](https://processing.org/reference/fullScreen_.html)**
>
> This function is new for Processing 3.0. It opens a sketch using the full size of the computer's display. This function must be the first line in setup(). The size() and fullScreen()\<…

> [@Ladan](#):
>
> touchscreen

? you want compile for android?

---

<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, 2:08pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/65 "2019-11-11T14:08:15Z")

</div>

that works nice thank you

---

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

</div>

no, it is for a touchscreen monitor, where you can click the buttons, to get to pages with information about a team on a competition on it.  
@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, 2:09pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/67 "2019-11-11T14:09:20Z")

</div>

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

You could get rid of this

---

<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, 2:11pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/68 "2019-11-11T14:11:14Z")

</div>

oh yes 😃im gonna do that

---

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

</div>

for variable sreen:

```auto
int state = 0;
boolean test = true;//false;//true;
int x1, y1, w1, h1; //Button oben links
int x2, y2, w2, h2; //Button oben rechts
int x3, y3, w3, h3; //Button unten links
int x4, y4, w4, h4; //Button unten rechts
int x5, y5, w5, h5; // Button zurück
/* // hard coded
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 setup_buttons() {
  x1 = width/10;
  y1 = height/10;
  w1 = 2*x1;
  h1 = 2*y1;
  
  x2 = width-x1-w1;
  y2 = y1;
  w2 = w1;
  h2 = h1;

  x3 = x1;
  y3 = height-y1-h1;
  w3 = w1;
  h3 = h1;

  x4 = x2;
  y4 = y3;
  w4 = w1;
  h4 = h1;

  x5 = x3;
  y5 = y3;
  w5 = w1;
  h5 = h1/2;
}

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 settings() {
  if ( test ) size(600, 400);
  else fullScreen();  
}

void setup() {
  setup_buttons();
  fill(0, 0, 200);
  strokeWeight(5);
  textSize(20);
}

void draw() {
  background(200, 100, 200);
  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();
  if ( state == 4 ) draw_back_button_and_some_text4();
}

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;
  }
}

void draw_4_buttons() {
  text("some text page 0 ", 120, height/2);
  draw_4_button();
}

void draw_back_button_and_some_text1() {
  text("some text page1 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text2() {
  text("some text page2 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text3() {
  text("some text page3 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text4() {
  text("some text page4 ", 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, 2:49pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/70 "2019-11-11T14:49:58Z")

</div>

thanks, but how do i know if it works for a touchscreen:

"  
no, it is for a touchscreen monitor, where you can click the buttons, to get to pages with information about a team on a competition on it.  
@Chrisir  
@kll  
"

---

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

</div>

i never had a  
? Touchscreen All-In-One Desktop ?  
can you not test it?

just idea, copy processing3.5.3 && sketchbook dirs … to a USB stick  
go to PC shop and say

> you must try first

---

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

</div>

i will use a pc, connected to a monitor that can handle touches. I just have to know, if MousePressed also activates if you tap the button on a touchscreen monitor  
@kll  
@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 11, 2019, 3:45pm UTC](https://discourse.processing.org/t/background-image-not-working/14305/73 "2019-11-11T15:45:01Z")

</div>

i am gonna make a new post, so it has the right name

---

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

</div>

here is my version - mainly ordering the order of functions

```auto
int state = 0;

boolean testSketch = true;//false;//true;

int x1, y1, w1, h1; //Button oben links
int x2, y2, w2, h2; //Button oben rechts
int x3, y3, w3, h3; //Button unten links
int x4, y4, w4, h4; //Button unten rechts
int x5, y5, w5, h5; // Button zurück

/* // hard coded
 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
 */

// ---------------------------------------------------------------------------
// processing Core Functions 

void settings() {
  if ( testSketch ) 
    size(600, 400);
  else
    fullScreen();
}

void setup() {
  setup_buttons();
  fill(0, 0, 200);
  strokeWeight(5);
  textSize(20);
}

void draw() {
  background(200, 100, 200);

  if ( state == 0 ) draw_4_buttons();
  else if ( state == 1 ) draw_back_button_and_some_text1();
  else if ( state == 2 ) draw_back_button_and_some_text2();
  else if ( state == 3 ) draw_back_button_and_some_text3();
  else if ( state == 4 ) draw_back_button_and_some_text4();
}

// ---------------------------------------------------------------------------
// belonging to setup()

void setup_buttons() {
  x1 = width/10;
  y1 = height/10;
  w1 = 2*x1;
  h1 = 2*y1;

  x2 = width-x1-w1;
  y2 = y1;
  w2 = w1;
  h2 = h1;

  x3 = x1;
  y3 = height-y1-h1;
  w3 = w1;
  h3 = h1;

  x4 = x2;
  y4 = y3;
  w4 = w1;
  h4 = h1;

  x5 = x3;
  y5 = y3;
  w5 = w1;
  h5 = h1/2;
}

// ---------------------------------------------------------------------------
// belonging to draw()

void draw_4_buttons() {
  text("some text page 0 ", 120, height/2);

  // _______ stat 0 only
  if ( over(x1, y1, w1, h1) ) 
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  pushStyle();
  fill(0);
  text("1", x1+33, y1+33);
  popStyle();

  if ( over(x2, y2, w2, h2) )
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  pushStyle();
  fill(0);
  text("2", x2+33, y2+33);
  popStyle();

  if ( over(x3, y3, w3, h3) )
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  pushStyle();
  fill(0);
  text("3", x3+33, y3+33);
  popStyle();

  if ( over(x4, y4, w4, h4) ) 
    stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  pushStyle();
  fill(0);
  text("4", x4+33, y4+33);
  popStyle();
}

void draw_back_button_and_some_text1() {
  text("some text page1 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text2() {
  text("some text page2 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text3() {
  text("some text page3 ", 20, 20);
  draw_zurueck_button();
}

void draw_back_button_and_some_text4() {
  text("some text page4 ", 20, 20);
  draw_zurueck_button();
}

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);
  pushStyle();
  fill(255);
  text("zurück", x5+33, y5+22);
  popStyle();
}

// -------------------------------------------------------------
// Inputs 

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

// -------------------------------------------------------------
// Tools

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

```

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