# Unit 3: Create a background with an image?

**URL:** <https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669>\
**Category:** Unit and Lesson Discussion\
**Tags:** csd-unit-3-lesson-6\
**Created:** [November 8, 2019, 4:51pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669 "2019-11-08T16:51:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hensleyn](https://avatars.discourse-cdn.com/v4/letter/h/5f9b8f/32.png) [@hensleyn](https://forum.code.org/u/hensleyn)\
**Post date:** [November 8, 2019, 4:51pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/1 "2019-11-08T16:51:15Z")

</div>

Is there a way to create a background with an image the student has? If so, what does the code look like? I am looking for this to happen in Unit 3, Game Lab.

---

<div class="post-metadata">

**Author:** ![bobd](https://avatars.discourse-cdn.com/v4/letter/b/bcef8e/32.png) [@bobd](https://forum.code.org/u/bobd)\
**Post date:** [November 8, 2019, 5:21pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/2 "2019-11-08T17:21:02Z")

</div>

I haven’t worked with Unit 3 yet but one of my students used a picture of chocolate ice cream as his background. Here is the style.css coding  
body {  
background-image: url(“chocolate.jpeg”);

}

---

<div class="post-metadata">

**Author:** ![melynn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/melynn/32/4925_2.png) [@melynn](https://forum.code.org/u/melynn)\
**Post date:** [November 8, 2019, 5:44pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/3 "2019-11-08T17:44:23Z")

</div>

@bobd is correct for Unit 2! That CSS will work. Here are some resources that will control whether it repeats etc. [https://www.w3schools.com/cssref/css3\_pr\_background.asp](https://www.w3schools.com/cssref/css3_pr_background.asp). You can also control if it scrolls or is fixed [https://www.w3schools.com/cssref/pr\_background-attachment.asp](https://www.w3schools.com/cssref/pr_background-attachment.asp).

If your question was about Game Lab, let us know.  
Michelle

---

<div class="post-metadata">

**Author:** ![hensleyn](https://avatars.discourse-cdn.com/v4/letter/h/5f9b8f/32.png) [@hensleyn](https://forum.code.org/u/hensleyn)\
**Post date:** [November 8, 2019, 6:43pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/4 "2019-11-08T18:43:48Z")

</div>

I would like to know this for Unit 3, Game Lab

---

<div class="post-metadata">

**Author:** ![melynn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/melynn/32/4925_2.png) [@melynn](https://forum.code.org/u/melynn)\
**Post date:** [November 8, 2019, 7:27pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/5 "2019-11-08T19:27:30Z")

</div>

Ahh…you upload the photo as a sprite and add it to your code so that it is all the way in the back. Here is an example of a simple scene where the background is a sprite (vs just the background color block). [https://studio.code.org/projects/gamelab/cOj6ZcO4LeKLvCUlDwlq4ymU85ATl1NZJV09ILPAYtk](https://studio.code.org/projects/gamelab/cOj6ZcO4LeKLvCUlDwlq4ymU85ATl1NZJV09ILPAYtk)

Good luck!  
Michelle

---

<div class="post-metadata">

**Author:** ![mmathews](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mmathews/32/4419_2.png) [@mmathews](https://forum.code.org/u/mmathews)\
**Post date:** [November 9, 2019, 2:37pm UTC](https://forum.code.org/t/unit-3-create-a-background-with-an-image/31669/6 "2019-11-09T14:37:22Z")

</div>

Yes. You can add a picture as a background by creating a background sprite. Keep in mind that the sequencing of commands matters in javascript. So if you have a `showScore()` function to display a scoreboard for the game, it would have to be called after the `drawSprites()` call. Here is an example:

```auto
var gameBackground = createSprite(200, 200);
gameBackground.setAnimation("day");
gameBackground.scale = 3;

var dayBtn = createSprite(200, 350, 40,30);
dayBtn.setAnimation("dayBtn");

var nightBtn = createSprite(300, 350, 40, 30);
nightBtn.setAnimation("nightBtn");

var score = 0;

function draw() {
  chooseBackground();
  drawSprites();
  showScore();
}

function showScore(){
  textSize(20);
  fill("orange");
  text("Score:", 10, 25);
  text(score, 70, 25);
}

function chooseBackground(){
  if(mousePressedOver(dayBtn))
    gameBackground.setAnimation("day");
  else if(mousePressedOver(nightBtn))
    gameBackground.setAnimation("night");
}

```

[Link to the sample](https://studio.code.org/projects/gamelab/dfpzYTxNlRyACwr5PmqRoshgWeSR9wzcw41Lmf9_Syc)