In an infinite scrolling game, we need a background that repeats continuously. Of course, adding variation to the background (or many layers of background, called parallax) improves the visual appeal greatly. However, usually, there is a basic tileable background that repeats at the very end.

The concept is that the image scrolls downward followed by another identical image. Since destroying and creating game objects aren't cheap functions from a computational point of view, it's good practice to use just a couple of image game object instances (instead of many that are created at the top and destroyed at the bottom). Both images scroll, then as soon as one goes off-screen, both are repositioned to their initial position. As a result, you create the illusion that the background repeats indefinitely.

From an operative point of view, we have two images: one that occupies the whole screen, and the other one just above. They will scroll down, and as soon as the second image fills the whole screen, both images are repositioned. We will create a single script that we will attach to both the images. This is an easy approach, but we need to remind the designers that they should share the same speed, otherwise they won't scroll seamlessly. Even if it is good practice to enforce this by code, for simplicity's sake we will delegate the responsibility of matching the two speeds to the designers.

Drag and drop the background image of the package, and then duplicate it. Place one in such a way that it fills the screen completely, and the other one just above, as shown in the following screenshot:

Now, create a C# script and name it RepeatingBackground. Attach the script to both the images, and open it.

As usual, we can define the speed as a public variable, so it can be easily set by designers:

    public float speed = 1.3f; 

Next, we need to use a couple of private variables to store the initial position and the offset, which is the y-length of the image, so we can write:

    private Vector3 initialPos; 
    private float offset; 

Then, we need to initialize these two variables at the Start() function. For the initial position, it is easy; for the offset, we have to retrieve the SpriteRenderer and extract the height, which can be found by retrieving the y-length from the size of the bounds:

   void Start () { 
        //Store the initial position 
        initialPos = transform.position; 
 
        //Store the y-length of the Sprite 
        offset = GetComponent<SpriteRenderer>().bounds.size.y; 
    } 

In the Update() function, we need to move the image downward. Why not use the FixedUpdate() function instead? For the first time with code, we need to move something in the Update() function because we don't have a rigidbody since the object/image doesn't have to interact (it's just a background, after all). As a result, not only can we use the Update() function, but we can move it by using its transform directly. Thus, let's write:

    void Update () { 
        //Scroll the background 
        transform.position += new Vector3(0, -Time.deltaTime, 0); 
   } 

Lastly, after the object has passed the offset, it has to be repositioned. Hence, we can check whether the absolute value of the difference between the current y position and the original one (which is a measure of the distance it has moved from the initial position, or in other terms the offset) is greater than the offset variable. If so, set the position for the initial one:

    void Update () { 
        //Scroll the background 
        transform.position += new Vector3(0, -Time.deltaTime, 0); 
 
        //Check if the scrolling has passed the offset, if so, reposition the image 
        if(Mathf.Abs(transform.position.y - initialPos.y) > offset) { 
            //Reposition the image 
            transform.position = initialPos; 
        } 
   } 

Save the script, and remember to assign the same speed to both your background images. As a result, if you hit play, we have the background repeating indefinitely.