{"id":68748,"date":"2025-04-24T00:30:47","date_gmt":"2025-04-24T06:30:47","guid":{"rendered":"https:\/\/www.codewizardshq.com\/?p=68748"},"modified":"2025-08-29T04:17:48","modified_gmt":"2025-08-29T10:17:48","slug":"how-to-make-a-scrolling-background-in-scratch","status":"publish","type":"post","link":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/","title":{"rendered":"How to Make a Scrolling Background in Scratch"},"content":{"rendered":"\n<p>There\u2019s a way to make your Scratch game or project more immersive with just the addition of one or two sprites. A scrolling background is a fun and simple effect where sprites are used to create the illusion of movement and motion. It\u2019s often combined with other effects to enrich a game or project and make it more visually appealing.<\/p>\n\n\n<p style=\"background: none repeat scroll 0 0 #ecf3f6; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #011e41; padding: 16px;\"><span>\ud83d\udccc<\/span><small><strong> [Download] Printable Scratch Coding Tutorials <\/strong> Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. <a href=\"#download\">Download Now<\/a><\/small><\/p>\n\n\n\n<p><strong>In this tutorial, I\u2019ll show you how to make a scrolling background in Scratch. <\/strong>Just like in the real world, backgrounds and locations change as we move. We\u2019ll try to recreate this with our Walk In The Park project. It\u2019s a great effect to add to any project, so give it a try!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"344\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-complete-game.gif\" alt=\"A Walk in The Park Complete gif\" class=\"wp-image-68785\"\/><\/figure><\/div>\n\n\n<p><strong>View and remix the <a href=\"https:\/\/scratch.mit.edu\/projects\/1162344241\/\" target=\"_blank\" rel=\"noreferrer noopener\">Walk In The Park<\/a> project now.<\/strong><\/p>\n\n\n<div class=\"lazyblock-cw1-wide-post-container-BXHYC wp-block-lazyblock-cw1-wide-post-container\"><div class=\"wide \"><div class=\"lazyblock-inner-blocks\">\n\n<div class=\"wp-block-atomic-blocks-ab-container table-of-contents ab-block-container\"><div class=\"ab-container-inside\"><div class=\"ab-container-content\">\n<p class=\"title\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#step-1\">Step 1: Create a New Scratch Project<\/a><\/li>\n\n\n\n<li><a href=\"#step-2\">Step 2: Draw the Background<\/a><\/li>\n\n\n\n<li><a href=\"#step-3\">Step 3: Animate the Cat Walking<\/a><\/li>\n\n\n\n<li><a href=\"#step-4\">Step 4: Draw the background sprites<\/a><\/li>\n\n\n\n<li><a href=\"#step-5\">Step 5: Animate Sprite 1 in the Hills Background<\/a><\/li>\n\n\n\n<li><a href=\"#step-6\">Step 6: Animate Sprite 2 in the Hills Background<\/a><\/li>\n\n\n\n<li><a href=\"#step-bonus-1\">Bonus 1: Add and Animate a Cloud Sprite<\/a><\/li>\n\n\n\n<li><a href=\"#step-bonus-2\">Bonus 2: Add music to your project<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-you-need\"><strong>What you need:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scratch account: <a href=\"https:\/\/scratch.mit.edu\/\">Create a free Scratch account<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-no-coding-experience-is-necessary-for-this-scrolling-background-tutorial-beginner-friendly-for-kids-ages-8-and-up\"><strong>No coding experience is necessary for this scrolling background tutorial. Beginner-friendly for kids ages 8 and up.<\/strong><\/h3>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-make-a-scrolling-background-in-scratch\">How to Make a Scrolling Background in Scratch<\/h2>\n\n\n\n<p>Our project is comprised of three different parts: the walking cat, the floating cloud, and the rolling hills.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1\">Step 1: Create a New Scratch Project<\/h3>\n\n\n\n<p>We always start in Scratch by creating a new project.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visit<strong> <\/strong><a href=\"https:\/\/scratch.mit.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/scratch.mit.edu\/<\/strong><\/a><\/li>\n\n\n\n<li><strong>Login<\/strong> to your account<\/li>\n\n\n\n<li>Click on the<strong> \u201cCreate\u201d<\/strong> button at the top<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcgrbe4HWpcyVnYCG107DkDPICu2y5F-9Qu7WH1BbnJKXArgbagzYTQnmSJaJh2dSZRnThoc_xqZL1d5RD6tU_6_95YDAUDRmQGWrLwrYLhmXkv3W9oxGG0xrWqtRKSkyqKlvDq3w?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"create a scratch project\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A new project will open, rename the sprite to <strong>\u201ccat\u201d<\/strong><\/li>\n\n\n\n<li>Rename your project to <strong>\u201cA Walk In the Park\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfqkrbJAmhDigstFmEjj6ojW6zWM6mKS1UbmP-qSKw67i6f1JRRtUzgQB3sw1MJWsm5JCPle4otejueQoZW5AW5Ss8PUfuJzT6I2uwK-y7BaRoXeih71WCEb9_YzqSoy5Ic3_HSaQ?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"rename your scratch project and sprite\"\/><\/figure>\n\n\n\n<p>You\u2019re ready to code!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"365\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-1-gif.gif\" alt=\"Scrolling background step 1 gif\" class=\"wp-image-68770\"\/><\/figure>\n\n\n\n<p><strong>Hint: <\/strong>Name your project anything you want and click on the orange \u201cShare\u201d button to make it available for others to remix.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2\"><strong>Step 2: Draw the Background<\/strong><\/h3>\n\n\n\n<p>The cat is walking in a basic setting with a blue sky and dirt path. We\u2019ll create this scene as a backdrop.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hover over the <strong>\u201cChoose a Backdrop\u201d<\/strong> icon and select <strong>\u201cPaint\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdHrtOGh3u1RYC9smOftVIf9ETYJmGcvig4ZDtyeZThbdj7wqtK3RyvePoKD42s9GI_kAYApc5Yfqiav2x2Ij0cyXklX2IT6WZgHVt1Zl9dFqNnNoujrl0KNk4a7mPdxXwI6D_-?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"paint a backdrop\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the <strong>rectangle tool <\/strong>to draw a blue rectangle for the blue sky<\/li>\n\n\n\n<li>Use the <strong>rectangle tool<\/strong> to draw a brown rectangle for the dirt path<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcFi3YN1MstIBU8UbWqshkbicFMsensgS8PVRKgWTQ5f7eq5nNK9qa0v849ItpM3ZTO-b0mzTxgpMO3I8C7gFlr_RvaqZ1_S0KIXkwXIQ6wH9VaK3wX3486EEF9keNaW-L9LjJrZQ?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"use the rectangle to paint a background\"\/><\/figure>\n\n\n\n<p>In the preview screen, you will see your cat sprite and the background you drew. You can reposition your cat sprite around to fit your new scene. This backdrop is not part of the moving background.<\/p>\n\n\n\n<p>Once you&#8217;re finished designing your backdrop, we can animate the cat to take a stroll!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"367\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-2.gif\" alt=\"Scrolling background step 2\" class=\"wp-image-68771\"\/><\/figure>\n\n\n\n<p><strong>Hint:<\/strong> You can draw more details in the background to fit your game or project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3\"><strong>Step 3: Animate the Cat Walking<\/strong><\/h3>\n\n\n\n<p>The cat sprite stays in place on the path, but appears to be walking. We animate the cat by changing its costume from having its foot down to up, then repeating that process.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201ccat\u201d <\/strong>sprite to add code to it<\/li>\n\n\n\n<li>Start with a <strong>\u201cwhen green flag clicked\u201d<\/strong> block from the Events category<\/li>\n\n\n\n<li>Add a<strong> \u201cforever\u201d<\/strong> loop to continuously run the code blocks inside<\/li>\n\n\n\n<li>Inside the loop, add a <strong>\u201cwait 0.5 seconds\u201d<\/strong> from the Control category<\/li>\n\n\n\n<li>Underneath the wait block, add <strong>\u201cnext costume\u201d <\/strong>to change costumes<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXduCnApVy9_OTIBLc5xokZ9TNYo0o0ezQ0O3HO-ssjlgFdjPVgQSQI3ltMjOKK46754tDSW0FZ6BgoXQ138sbvwroaAXFFvdiQCmgSzPp3U8w_Hb35-AX_GSLeK58oI5cAHjjvExg?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"animate cat walking\"\/><\/figure>\n\n\n\n<p>This means that every 0.5 seconds, the cat\u2019s costume will switch.<\/p>\n\n\n\n<p>Press the green flag to test your code. It should look like your sprite is walking!<\/p>\n\n\n\n<p>If it works, let\u2019s move on to add a scrolling background.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-3-gif.gif\" alt=\"Scrolling background step 3 gif\" class=\"wp-image-68772\"\/><\/figure>\n\n\n\n<p><strong>Hint:<\/strong> See the different costumes in the \u201ccostumes\u201d tab and add costumes to create your own walking effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4\"><strong>Step 4: Draw the Scrolling Background Sprites<\/strong><\/h3>\n\n\n\n<p>We need to draw two sprites to represent the hills that scroll in the background. These sprites will move across the screen to create the scrolling effect.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hover over the <strong>\u201cChoose a Sprite\u201d <\/strong>icon and select <strong>\u201cPaint\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXducS-MXIH_cWV8d85TBvLYqHKKMbHCSga8DaHpJpVz4GEvUs3Q88xf2E_BpvM0rqnztRNH0I5Fe5Eyqre66GwrUhatO8rbA_EB0g-w-KzLYomy7VOKNJs8F-Y2DbhdGXqZ32PKUw?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"paint a scratch sprite\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the square tool to <strong>draw a green rectangle<\/strong> from one edge of the project screen to the other<\/li>\n\n\n\n<li><strong>Add a few points <\/strong>on the top of the rectangle using the <strong>\u201cReshape\u201d<\/strong> tool<\/li>\n\n\n\n<li><strong>Drag the points up and down<\/strong> to create multiple hills. The only points you should <em>not change<\/em> are the corners of the rectangle, so that the two points line up in the animation.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcJp-mVcEOogiwk9f_g54eDutqnikK3Wwiq_-qlBNrxMDfweO7VOv8R2Im8zFkCn-ey2VtKrFhIeitaIbBYVRu5txmbL7mUmuzEzGKianlggIRWnxWRVqiBPzNLYLrWz4kAOdY5NA?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"draw the hills\"\/><\/figure>\n\n\n\n<p>In order for our sprite to go off the screen as it moves, we will add a transparent box behind it that increases the width of our sprite.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the square tool to <strong>draw a<\/strong> <strong>transparent rectangle<\/strong> from one edge of the artboard to the other.<\/li>\n\n\n\n<li>Then, rename the sprite<strong> \u201chills1\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcIjLMMCUWUZ0EoUHYXHFKiKQjMxx4bFnKpNSI2spaMNiE9802DxiI2VsHayzrGAr6xgGxGuNdzhjc9ObPWodTIcguW7XXy_jpp2WzuAQ2jsBXUY_83KxLK3tb6MqzzCNn1g99W?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"draw transparent box\"\/><\/figure>\n\n\n\n<p>Now, create the second sprite.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Right-click on the<strong> \u201chills1\u201d <\/strong>sprite and select <strong>duplicate<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf9ZsI9Sxd1_io2_WHI3g1A2J596TeJhcYJ67uXUF4125mPQrJm1HtQ1tbfr_8sl_poiusGLyUk6d-GI19Q9sttN3uq8fInkERLTvLi0sFqFJz69YL-n6IyJtHczWe5rz0YoYBcUw?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"duplicate hills1 sprite\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rename the new sprite<strong> \u201chills2\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcv6jGpOlnbA1D-Wnl9xnuU-Kxbt4B62gXa6tPc7_BUjaX3WpJPfCLE5eK_lp2_BwcHqD4PBdNHN2l_9j5widULONR6iCc9fXySElbhueFPuPMdMHW6xQ2Ri-rMA-NKJS-HlWngbg?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"rename hills2 sprite\"\/><\/figure>\n\n\n\n<p>In your preview screen, you can see both sprites. These two sprites are all you need to make a seamless scrolling background!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"365\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-4-gif.gif\" alt=\"Scrolling background step 4 gif\" class=\"wp-image-68773\"\/><\/figure>\n\n\n\n<p><strong>Hint: <\/strong>You can change the color of the \u201chills2\u201d sprite so you can see how the effect is working in your preview screen. Later, change it back to match \u201chills1\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5\"><strong>Step 5: Animate Sprite 1 in the Hills Background<\/strong><\/h3>\n\n\n\n<p>The background position of the hills sprites will move from right to left and then start that process again continuously like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"772\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/How-scrolling-works.jpg\" alt=\"how scrolling works in scratch\" class=\"wp-image-68758\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/How-scrolling-works.jpg 800w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/How-scrolling-works-300x290.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/How-scrolling-works-768x741.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The \u201chills1\u201d sprite starts in the center of the project. When we start the program, place it there.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On the \u201chills1\u201d sprite, add a <strong>\u201cwhen green flag clicked\u201d<\/strong> block<\/li>\n\n\n\n<li>In the preview screen, set the \u201chills1\u201d sprite in the center. Use those x and y coordinates in a <strong>\u201cgo to\u201d block<\/strong>. My sprite is positioned at x = 1 and y = 25 so I will use those coordinates.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcqkRAUlpu-DWZRaccVnfZFoNwNOR2jgYM8IEglPbaPkqpM4W2fKOoK10MgbNqd6olHTAGolS4jVYJ6Ah7AUC_2R-UMJT13z8OglRgtzBrro2iqfh9ms5FtjKvbGo52AlJcrZs?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"go to block\"\/><\/figure>\n\n\n\n<p>Next, we want the sprite to scroll all the way to the left until it goes off the screen.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the preview screen, set the \u201chills1\u201d sprite just off the left side of the screen. Use those x and y coordinates in a <strong>\u201cglide 10 seconds to\u201d block<\/strong>. My sprite is positioned at x = -480 and y = 25.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfmXddC4pmMeObx9XG4KVyOUWBjbeflmGDqoRetFaaCQnUDVNNyHqtTN8wQR-BdZ0pnrNEr5azlY9PBju2vS74BXfkeRcrYjv_2J9SoAnSXK8ZijIhE8Op-Fzxk9osFaqPMIiAEYw?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"Go to and glide to position background\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You might have noticed your \u201chills1\u201d sprite covers the \u201ccat\u201d sprite. Under<strong> \u201cwhen green flag clicked\u201d<\/strong> add a <strong>\u201cgo to back layer\u201d<\/strong> from the Looks category.<\/li>\n\n\n\n<li>Wrap a &#8220;<strong>forever&#8221; <\/strong>loop around these blocks to repeat the actions.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeBZBv4ipwcFEvecOL-WRdF6adXqWiSmWcEd1kcteAGMWPCrz4j8Sh3LjihKOg8brHSoCiDEGmb5mJM7ANS-I2B0auOX1nE4VQJFi7s6h_2yZJq79-HRPoLe4uRiwZwOl34M30zzQ?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"loop the background movement\"\/><\/figure>\n\n\n\n<p>Click the green flag to see your \u201chills1\u201d sprite moving to the left. Keep it up, only a few steps left!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-5-gif.gif\" alt=\"Scrolling background step 5 gif\" class=\"wp-image-68774\"\/><\/figure>\n\n\n\n<p><strong>Hint:<\/strong> Experiment with the timing and position of your sprite to fit your animation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-6\"><strong>Step 6: Animate Sprite 2 in the Hills Background<\/strong><\/h3>\n\n\n\n<p>The code for the second hills sprite will have the same format as the first sprite. However, the sprite will start at the right side of the screen and move to the center.<\/p>\n\n\n\n<p>When we start the program, place \u201chills2\u201d off to right side of the screen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On the \u201chills2\u201d sprite, add a <strong>\u201cwhen green flag clicked\u201d<\/strong> block<\/li>\n\n\n\n<li>Next add a <strong>\u201cforever\u201d loop<\/strong> underneath it, since we want to repeat these actions<\/li>\n\n\n\n<li>Inside the loop add a <strong>\u201cgo to back layer\u201d<\/strong> block<\/li>\n\n\n\n<li>In the preview screen, set the<strong> \u201chills2\u201d <\/strong>sprite just off of the right side of the screen.<\/li>\n\n\n\n<li>Use those x and y coordinates in a <strong>\u201cgo to\u201d block<\/strong>. My sprite is positioned at x = 480 and y = 25.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeGE8adu4y3mEqRpP63yGwW26bSpPwAAKjHJIS1-qEwbHJbb8aorzkS5JZVewYVCCfs5erQBtWGY-F1lh44kmhOCEJPzhT1v9b2xOgekW9GE4v3VoNA2aU9uDiiwqR4FjxApvPM?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"go to x y position\"\/><\/figure>\n\n\n\n<p>Now, we want the sprite to move to the left until it gets to the center where the \u201chills1\u201d sprite started.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add<strong> \u201cglide 10 seconds\u201d<\/strong> block and use the same coordinates that <strong>\u201chills1\u201d <\/strong>sprite started with.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdq7Bseg_2ag1EiweZmDAOyiPVzah17aYbpQxjw211WCxs9_IZKm9w_crcNa8oc0FGm4Ri3FgX8FfLRX2QTNH1fStTIT1WtluolBTsXjstP2hnfqAs_mcQWyVOCXBfOdY9dj4z-Fw?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"glide to position\"\/><\/figure>\n\n\n\n<p>Click the green flag to see your hills moving to the left. Is everything working properly?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-6-gif.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"367\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-step-6-gif.gif\" alt=\"Scrolling background step 6 gif\" class=\"wp-image-68775\"\/><\/a><\/figure>\n\n\n\n<p><strong>Hint:<\/strong> If you are seeing a gap between your two sprites, increase or decrease the x position on the hills sprites.<\/p>\n\n\n\n<p><strong>Your scrolling background is complete! View and remix <\/strong><a href=\"https:\/\/scratch.mit.edu\/projects\/1162344241\/\"><strong>A Walk In The Park project<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"344\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-complete-game.gif\" alt=\"A Walk in The Park Complete gif\" class=\"wp-image-68785\"\/><\/figure>\n\n\n\n<p>This is just one way to create a scrolling background effect. You can test different designs, speeds, and timings to create a unique experience for your project or game. In the bonus steps, I will show you how to animate a cloud in the background scroll and add music to your project.<\/p>\n\n\n\n<p>If you want to learn from the experts, join our top-rated <a href=\"https:\/\/www.codewizardshq.com\/scratch-coding-classes\/\">Scratch classes for kids<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bonus-1-add-and-animate-a-scrolling-cloud-sprite\"><strong>Bonus 1: Add and Animate a Scrolling Cloud Sprite<\/strong><\/h3>\n\n\n\n<p>Let\u2019s create a scrolling background animation with only one sprite.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201cChoose a Sprite\u201d<\/strong> icon<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXca8ph2veFwM99QsOiW6TTNJjxp4kLkRL1corlQ_XBTbNL72PKPibWmKftIYsLT98JJ6JQJirsjdq5w7zWirCFlaHYzVPtBoBrB_PKrytVITzTrPldanepK7rnTJaWcOIikwoRQgQ?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"choose a spirte button\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Search for the<strong> \u201ccloud\u201d <\/strong>sprite and click to add it<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfgffNT2Ylzjfv9Dt3K69-BtZmP7qO43QmyYv9mO7HddmlszVjBP1YD3PTV8BNbrLEuzlU5ppQw1dALxxi5yKHnjUY7TkxLm00X9a7aGf0YI1ZaDu2-Vc25lrmTik6BipJevQPk?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"select the cloud sprite\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Since we want this sprite to go offscreen, go to <strong>Costumes <\/strong>tab and use the square tool to add a transparent rectangle in the background. This will allow the sprite to go off screen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeZM4vuJb-UcqJEePBM8_waw57uFH4ycdyBmIdM0VWVi-JCsx_CesBr73YvIF4LS9rfpVQ71ek073t-88AUW31xP_HfAY5KgFFB60YmLKoVGgARqHKqjPCj3wW-s54C5Bp_Ytpc?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"add a transparent background\"\/><\/figure>\n\n\n\n<p>&nbsp;Now, let\u2019s add the code that moves the cloud object.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201cCode\u201d<\/strong> tab<\/li>\n\n\n\n<li>Start with a <strong>\u201cwhen green flag clicked\u201d<\/strong> block<\/li>\n\n\n\n<li>Add a <strong>\u201cforever\u201d<\/strong> block from the Control category<\/li>\n\n\n\n<li>Add&nbsp; a <strong>\u201cgo to\u201d block<\/strong> inside the loop. Position your cloud to the right off-screen and use those coordinates, mine are<strong> x = 325 and y = 100<\/strong><\/li>\n\n\n\n<li>Then, glide the cloud to the left side of a screen with <strong>\u201cglide 7 seconds to\u201d<\/strong>. Position your cloud to the left off-screen and use those coordinates, mine are <strong>x = -325 and y = 100<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe9u1QtbtCHnZ8-_UOmyCWmnXgNAoe2y11mckpetURe3kOdZ9yolDVkfqiaxcR0sJMaV512HAhQ8i8Jz_zjCX3kCFk9uf9bySavGtqAlBDfk_W5_ly6rKLg4qEEX7BRPC7knWAt1w?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"forever go to and glide\"\/><\/figure>\n\n\n\n<p>Press the green flag to see your cloud floating in the sky.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-bonus-1-gif.gif\" alt=\"Scrolling background bonus 1 gif\" class=\"wp-image-68768\"\/><\/figure>\n\n\n\n<p><strong>Hint: <\/strong>Change the number of seconds in the glide block to make your cloud move faster or slower.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bonus-2-add-music-to-your-scrolling-background-project\"><strong>Bonus 2: Add Music to Your Scrolling Background Project<\/strong><\/h3>\n\n\n\n<p>First, let\u2019s set the background music we want to add.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the cat sprite and go to the <strong>\u201cSounds\u201d tab<\/strong><\/li>\n\n\n\n<li>Click on the <strong>\u201cChoose a Sound\u201d<\/strong> icon at the bottom<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfHRwkyPY7NHLT7BQJ5b01KcB5EFyDi9j-qDgP2UzSWQdpI29_1FlC6q95jgZ65_mEdtQGQb3Cp6ckeN0CzkK3HRYOQdKVimtWF1nbzzW5Uc9-VqE5lVpSkK76JDj2QhIhrJhHe-Q?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"go to sounds tab\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a sound from the <strong>\u201cLoops\u201d <\/strong>category. I\u2019m using Dance Around.<\/li>\n<\/ul>\n\n\n\n<p>Now, let\u2019s add the code that plays the music in the background.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the<strong> \u201cCode\u201d<\/strong> tab<\/li>\n\n\n\n<li>Add another <strong>\u201cWhen green flag clicked\u201d<\/strong> block<\/li>\n\n\n\n<li>Underneath that, use a<strong> \u201cforever\u201d block<\/strong> to continuously play the music<\/li>\n\n\n\n<li>Inside the loop, use a <strong>\u201cplay sound until done\u201d<\/strong> and select the sound you chose.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf6lgooXwR5m12ydJE-WI4aAj9TQfTrnThXGFDXB2JRlZtvViyo-J2QlHJa5Kdw013NjI26kfL-Z35mGhyslQKkH1E_f8mgYBufPOkUT7Zugs8zTHO6iPu_5R1v8OPZPEYPXQfl?key=zMCWJVOcf9YlwDb9UtpJKq3a\" alt=\"play sound until done\"\/><\/figure>\n\n\n\n<p>Hit the green flag to listen to the song. What a nice atmosphere you\u2019ve created by adding background music to your scene!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/Scrolling-bonus-2-gif.gif\" alt=\"Scrolling background bonus 2 gif\" class=\"wp-image-68769\"\/><\/figure>\n\n\n\n<p><strong>Hint: <\/strong>You can upload a music file or even record a song to play in the \u201cSounds\u201d tab.&nbsp;<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-learn-more-scratch-effects-with-tutorials\">Learn More Scratch Effects with Tutorials<\/h2>\n\n\n\n<p>There are so many possibilities in Scratch! You can learn to code different effects, like the scrolling background, through tutorials or join a Scratch class to learn from the experts.&nbsp;<\/p>\n\n\n\n<p>Try one of these fun beginner tutorials next.<\/p>\n\n\n<div class=\"secondary-blog-posts\"><div class=\"row\"><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/how-to-make-a-maze-in-scratch-in-7-steps\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2024\/11\/How-to-code-a-maze-page-banner.png');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>How to Make a Maze in Scratch in 7 steps<\/span><\/h3><span class=\"date\">Updated on June 2, 2025<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/how-to-make-flappy-bird-on-scratch\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2023\/04\/01-Flappy-Bird-on-Scratch-1600x395-1.jpg');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>How to Make Flappy Bird on Scratch<\/span><\/h3><span class=\"date\">Updated on June 2, 2025<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/scratch-tutorial-for-kids-flying-space-cat\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/11\/flying-space-cat-page-banner.png');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>Scratch Tutorial For Kids: Flying Space Cat<\/span><\/h3><span class=\"date\">Updated on April 22, 2025<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/scratch-tutorial-for-kids\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/10\/01-Rocket-Landing-1600x395-1.jpg');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>Simple Scratch Tutorial for Kids: Code a Rocket Landing Game<\/span><\/h3><span class=\"date\">Updated on June 2, 2025<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/scratch-coding-for-kids-valentines-card-2021\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2021\/02\/Valentine-Scratcher-Banner.jpg');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>Scratch Coding for Kids: Valentine\u2019s Day Card Scratcher Activity<\/span><\/h3><span class=\"date\">Updated on September 1, 2023<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/scratch-coding-for-kids-holiday-2020\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/12\/christmas-advent-scratch-coding-2020-banner.jpg');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>Scratch Coding for Kids: Holidays Advent Calendar<\/span><\/h3><span class=\"date\">Updated on November 14, 2024<\/span><\/div><\/a><\/div><div class=\"col col-12 col-md-6\"><a href=\"https:\/\/www.codewizardshq.com\/scratch-coding-for-kids-halloween-2020\/\"><span class=\"image\" style=\"background-image:url('https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/10\/Halloween-scratch-activity-page-banner.png');\"><span class=\"label\" style=\"background:rgba(182,62,68,.8)\">Learn Coding<\/span><\/span><div class=\"text\"><h3 class=\"title\"><span>Scratch Coding for Kids: Halloween Candy Collector Game<\/span><\/h3><span class=\"date\">Updated on August 26, 2025<\/span><\/div><\/a><\/div><\/div><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-download-free-printable-scratch-coding-tutorials-pdf\">Download Free Printable Scratch Coding Tutorials PDF<\/h2>\n\n\n\n<p>Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.<\/p>\n\n\n<!-- This site is converting visitors into subscribers and customers with OptinMonster - https:\/\/optinmonster.com :: Campaign Title: Scratch Coding Tutorials with Location [Download] -->\n<div id=\"om-i88ehlfzgijqlvmuilzg-holder\"><\/div>\n<script>(function(d,u,ac){var s=d.createElement('script');s.type='text\/javascript';s.src='https:\/\/a.omappapi.com\/app\/js\/api.min.js';s.async=true;s.dataset.user=u;s.dataset.campaign=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,16320,'i88ehlfzgijqlvmuilzg');<\/script>\n<!-- \/ OptinMonster -->\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-try-a-scratch-coding-class-for-kids\">Try a Scratch Coding Class for Kids<\/h2>\n\n\n\n<p><strong>Now you know how to make a scrolling background in Scratch! <\/strong>It\u2019s simple and you can include it in any game or project you code to make it better.<\/p>\n\n\n\n<p>Kids can also learn Scratch from the experts in our <a href=\"https:\/\/www.codewizardshq.com\/coding-classes-elementary-school-students\/\">elementary school coding program<\/a>. It\u2019s designed to teach kids, ages 8-11, how to think like programmers while building fun, interactive projects. Students learn fundamental programming concepts in Scratch and then advance to text-based languages like JavaScript and Python. It\u2019s the best way for kids to learn Scratch.<\/p>\n\n\n\n<p><strong>Explore our programs and join our top-rated <a href=\"https:\/\/www.codewizardshq.com\/scratch-coding-classes\/\">Scratch classes for kids<\/a>.<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There\u2019s a way to make your Scratch game or project more immersive with just the addition of one or two sprites. A scrolling background is a fun and simple effect where sprites are used to create the illusion of movement and motion. It\u2019s often combined with other effects to enrich a game or project and [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":68753,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[10809],"tags":[10740,10814],"class_list":["post-68748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","tag-scratch","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v26.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Make a Scrolling Background in Scratch | CodeWizardsHQ<\/title>\n<meta name=\"description\" content=\"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Scrolling Background in Scratch\" \/>\n<meta property=\"og:description\" content=\"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeWizardsHQ\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codewizardshq\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-24T06:30:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-29T10:17:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-social-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"323\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Margaret Choi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:site\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margaret Choi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Margaret Choi\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\"\n\t            },\n\t            \"headline\": \"How to Make a Scrolling Background in Scratch\",\n\t            \"datePublished\": \"2025-04-24T06:30:47+00:00\",\n\t            \"dateModified\": \"2025-08-29T10:17:48+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\"\n\t            },\n\t            \"wordCount\": 1852,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg\",\n\t            \"keywords\": [\n\t                \"Scratch\",\n\t                \"tutorials\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Activities\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\",\n\t            \"name\": \"How to Make a Scrolling Background in Scratch | CodeWizardsHQ\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg\",\n\t            \"datePublished\": \"2025-04-24T06:30:47+00:00\",\n\t            \"dateModified\": \"2025-08-29T10:17:48+00:00\",\n\t            \"description\": \"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg\",\n\t            \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg\",\n\t            \"width\": 1600,\n\t            \"height\": 395,\n\t            \"caption\": \"a walk in the park page banner\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.codewizardshq.com\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Make a Scrolling Background in Scratch\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#website\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t            \"name\": \"CodeWizardsHQ\",\n\t            \"description\": \"The leading online coding academy for kids and teens ages 8-18\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.codewizardshq.com\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\",\n\t            \"name\": \"CodeWizardsHQ\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t                \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t                \"width\": 150,\n\t                \"height\": 108,\n\t                \"caption\": \"CodeWizardsHQ\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/www.facebook.com\/codewizardshq\/\",\n\t                \"https:\/\/x.com\/codewizardshq\",\n\t                \"https:\/\/www.instagram.com\/codewizardshq\/\",\n\t                \"https:\/\/www.linkedin.com\/company\/codewizardshq\",\n\t                \"https:\/\/www.pinterest.com\/codewizardshq\/\",\n\t                \"https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw\"\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\",\n\t            \"name\": \"Margaret Choi\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t                \"caption\": \"Margaret Choi\"\n\t            },\n\t            \"description\": \"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/www.facebook.com\/margaret.choi.3\"\n\t            ],\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Make a Scrolling Background in Scratch | CodeWizardsHQ","description":"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Scrolling Background in Scratch","og_description":"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.","og_url":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/","og_site_name":"CodeWizardsHQ","article_publisher":"https:\/\/www.facebook.com\/codewizardshq\/","article_published_time":"2025-04-24T06:30:47+00:00","article_modified_time":"2025-08-29T10:17:48+00:00","og_image":[{"width":620,"height":323,"url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-social-banner.png","type":"image\/png"}],"author":"Margaret Choi","twitter_card":"summary_large_image","twitter_creator":"@codewizardshq","twitter_site":"@codewizardshq","twitter_misc":{"Written by":"Margaret Choi","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#article","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/"},"author":{"name":"Margaret Choi","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca"},"headline":"How to Make a Scrolling Background in Scratch","datePublished":"2025-04-24T06:30:47+00:00","dateModified":"2025-08-29T10:17:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/"},"wordCount":1852,"publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"image":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg","keywords":["Scratch","tutorials"],"articleSection":["Activities"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/","url":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/","name":"How to Make a Scrolling Background in Scratch | CodeWizardsHQ","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage"},"image":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg","datePublished":"2025-04-24T06:30:47+00:00","dateModified":"2025-08-29T10:17:48+00:00","description":"It\u2019s really easy to make a scrolling background in Scratch! This effect can bring your Scratch game or animation to life. Beginner tutorial.","breadcrumb":{"@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#primaryimage","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner.jpg","width":1600,"height":395,"caption":"a walk in the park page banner"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codewizardshq.com\/how-to-make-a-scrolling-background-in-scratch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codewizardshq.com\/"},{"@type":"ListItem","position":2,"name":"How to Make a Scrolling Background in Scratch"}]},{"@type":"WebSite","@id":"https:\/\/www.codewizardshq.com\/#website","url":"https:\/\/www.codewizardshq.com\/","name":"CodeWizardsHQ","description":"The leading online coding academy for kids and teens ages 8-18","publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codewizardshq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codewizardshq.com\/#organization","name":"CodeWizardsHQ","url":"https:\/\/www.codewizardshq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","width":150,"height":108,"caption":"CodeWizardsHQ"},"image":{"@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codewizardshq\/","https:\/\/x.com\/codewizardshq","https:\/\/www.instagram.com\/codewizardshq\/","https:\/\/www.linkedin.com\/company\/codewizardshq","https:\/\/www.pinterest.com\/codewizardshq\/","https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw"]},{"@type":"Person","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca","name":"Margaret Choi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","caption":"Margaret Choi"},"description":"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.","sameAs":["https:\/\/www.facebook.com\/margaret.choi.3"],"url":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"}]}},"modified_by":"Dima","featured_image_src":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner-600x395.jpg","featured_image_src_square":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2025\/04\/a-walk-in-the-park-page-banner-600x395.jpg","author_info":{"display_name":"Margaret Choi","author_link":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"},"_links":{"self":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/68748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/comments?post=68748"}],"version-history":[{"count":41,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/68748\/revisions"}],"predecessor-version":[{"id":71773,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/68748\/revisions\/71773"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media\/68753"}],"wp:attachment":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media?parent=68748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/categories?post=68748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/tags?post=68748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}