# Scrolling background

**URL:** <https://forum.code.org/t/scrolling-background/34533>\
**Category:** Website and Tools How-To\
**Created:** [April 6, 2021, 3:21pm UTC](https://forum.code.org/t/scrolling-background/34533 "2021-04-06T15:21:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael.coyner](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@michael.coyner](https://forum.code.org/u/michael.coyner)\
**Post date:** [April 6, 2021, 3:21pm UTC](https://forum.code.org/t/scrolling-background/34533/1 "2021-04-06T15:21:26Z")

</div>

We’re working on free lance game project in Game Lab. Is there a way to make the background scroll/move so it looks like the player is traversing?

---

<div class="post-metadata">

**Author:** ![mkmietowicz](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mkmietowicz/32/6322_2.png) [@mkmietowicz](https://forum.code.org/u/mkmietowicz)\
**Post date:** [April 7, 2021, 3:42am UTC](https://forum.code.org/t/scrolling-background/34533/2 "2021-04-07T03:42:19Z")

</div>

Hi @michael.coyner,

To my knowledge, not directly. However, there _ **are** _ some clever tricks you can do with sprites where you make it _look_ as though the background is moving.

Think about what a scrolling background would look like and how you could mock that up with sprites. What behaviors could you mimic?

Hope that helps!

–Michael K.

---

<div class="post-metadata">

**Author:** ![michael.coyner](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@michael.coyner](https://forum.code.org/u/michael.coyner)\
**Post date:** [April 7, 2021, 12:57pm UTC](https://forum.code.org/t/scrolling-background/34533/4 "2021-04-07T12:57:55Z")

</div>

add velocity to background sprite and have it repeat? but then you’ll see the edge of the bg sprite as it progresses, no?

---

<div class="post-metadata">

**Author:** ![mkmietowicz](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mkmietowicz/32/6322_2.png) [@mkmietowicz](https://forum.code.org/u/mkmietowicz)\
**Post date:** [April 7, 2021, 5:12pm UTC](https://forum.code.org/t/scrolling-background/34533/5 "2021-04-07T17:12:37Z")

</div>

Try it out! 🙂 If you notice an edge, think about how you can change the sprite’s animation so the edge isn’t visible.

---

<div class="post-metadata">

**Author:** ![michael.coyner](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@michael.coyner](https://forum.code.org/u/michael.coyner)\
**Post date:** [April 8, 2021, 3:10pm UTC](https://forum.code.org/t/scrolling-background/34533/6 "2021-04-08T15:10:00Z")

</div>

got it it work…used 2 bg sprites. once the 1st one off the screen reset x pos to after 2nd bg x pos. except for the seam between the two sprites, it works. thx:)

p.s. I like how you turned ‘teacher’ on me!

---

<div class="post-metadata">

**Author:** ![mkmietowicz](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mkmietowicz/32/6322_2.png) [@mkmietowicz](https://forum.code.org/u/mkmietowicz)\
**Post date:** [April 14, 2021, 5:07am UTC](https://forum.code.org/t/scrolling-background/34533/7 "2021-04-14T05:07:49Z")

</div>

Glad to help! I’ll bet it felt better to find your own solution than it would have had I told you the answer, too.

Hmm… wonder how this relates to students? 😉

---

<div class="post-metadata">

**Author:** ![jtyler](https://avatars.discourse-cdn.com/v4/letter/j/53a042/32.png) [@jtyler](https://forum.code.org/u/jtyler)\
**Post date:** [July 2, 2024, 10:43pm UTC](https://forum.code.org/t/scrolling-background/34533/9 "2024-07-02T22:43:28Z")

</div>

Hello everyone,

In case someone in the future comes across this like I did here is a possible solution. It is important to note the “forest” animation was a picture that is 400 by 400. The math changes based on the size of the picture you are using.

// Create your sprites here  
var forest = createSprite(200, 200);  
forest.setAnimation(“forest”);  
forest.velocityX=-3;  
var forest1 = createSprite(600, 200);  
forest1.setAnimation(“forest”);  
forest1.velocityX=-3;

function draw() {  
drawBackground();  
drawSprites();  
}

function drawBackground() {  
if (forest.x \< -200) {  
forest.x=600  
forest1.x = 200;  
forest.setAnimation(“forest”);  
}  
else if (forest1.x \< -200) {  
forest1.x = 600;  
forest.x=200;  
forest1.setAnimation(“forest”);  
}

}