# Background appearing ontop of sprites

**URL:** <https://forum.code.org/t/background-appearing-ontop-of-sprites/40522>\
**Category:** Coding and Debugging Help\
**Tags:** csd-unit-3\
**Created:** [March 10, 2025, 3:29pm UTC](https://forum.code.org/t/background-appearing-ontop-of-sprites/40522 "2025-03-10T15:29:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![leslie.dillon](https://avatars.discourse-cdn.com/v4/letter/l/b19c9b/32.png) [@leslie.dillon](https://forum.code.org/u/leslie.dillon)\
**Post date:** [March 10, 2025, 3:29pm UTC](https://forum.code.org/t/background-appearing-ontop-of-sprites/40522/1 "2025-03-10T15:29:16Z")

</div>

Student created for unit 3 lesson 25. When 10 coins are collected the background sprite appears, however the bunny and coin do not.

> **[Check out what I made](https://studio.code.org/projects/gamelab/ShpXnBMz39-JOi7uEgFryh4FFTh5rduv-FE7nNwHXfU)**
>
> I wrote the code myself with Code.org

---

<div class="post-metadata">

**Author:** ![varrience](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/varrience/32/8042_2.png) [@varrience](https://forum.code.org/u/varrience)\
**Post date:** [March 10, 2025, 7:53pm UTC](https://forum.code.org/t/background-appearing-ontop-of-sprites/40522/2 "2025-03-10T19:53:21Z")

</div>

your issue pertains to how the background was declared incorrectly functions that are declared do not have `.setAnimation` only sprites do, for a sprite background we need an actual sprite by using `bg2` in this example we preserve most of your naming schema while swapping out the necessary parts (and yes the `.visible` property is being used to keep it hidden until you actually wish to show it)

```js
var bg2 = createSprite(200,200);
bg2.visible = false;
var coin = createSprite(200,10);
coin.setAnimation("coin_gold_1");
setCoin();
var bunny = createSprite(200,350);
bunny.setAnimation("bunny1_ready_1");

var score = 0;

function draw() {
  if(keyDown("left")){
    bunny.x = bunny.x - 4;
  }
  
  if(keyDown("right")){
    bunny.x = bunny.x + 4;
  }
  
  
  if (score < 10) {
    background1();
  } else {
    background2();
  }
  if(coin.y > 400){
    setCoin();
  }
  if (coin.isTouching(bunny)) {
    bunnycatchcoin();
  }
  drawSprites();
  textSize(20);
  text("Score: " + score, 10, 10, 100, 100);
 
}
function background1() {
  background("white");
}
function background2() {
 bg2.setAnimation("background_landscape28_1");
 bg2.visible = true;
}

function bunnycatchcoin() {
coin.x = randomNumber(1, 400);
coin.velocityY = randomNumber(5, 10);
coin.y = 10;
score = score + 1;
}
function setCoin(){
coin.velocityY = 5;
coin.y = 10;
coin.x = randomNumber(1, 400);
}

```

# Varrience

---

<div class="post-metadata">

**Author:** ![edavis](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/edavis/32/4927_2.png) [@edavis](https://forum.code.org/u/edavis)\
**Post date:** [March 11, 2025, 12:20am UTC](https://forum.code.org/t/background-appearing-ontop-of-sprites/40522/3 "2025-03-11T00:20:45Z")

</div>

You can make this work by making the background 2 into a sprite rather than treating it like a traditional background. Take a look at this to see if it helps some.

> **[Check out what I made](https://studio.code.org/projects/gamelab/nUypHVJnp5OLrWcoijg8KAQ406VRpSCuFwOetiAkXgQ)**
>
> I wrote the code myself with Code.org