Scrolling background logic?

It depends on your purpose.

Your typewriter example is a possible solution. You start with a given sequence and once it reaches the end, you start with the first one again. The advantage is that it is pretty straight forward, but could become repetitive.

You can also have a pool of different segments that get randomly spawned at the end of the last segment. It can create a more diverse feeling, but it can potentially be more work because you do want them to connect visually. This approach would be more semi procedural in a way.

Or perhaps a bit of both worlds: Have a basic background scroll and spawn various background objects based on whatever factor you want.

Right now I am thinking of it like a typewriter. When the head gets to the end, it jumps back to the first position and repeats that. Am I clos?

You are definitely on the right track. Basically, you draw your background twice.

So you have two instances of your background: A and B. As background A moves along you draw background B trailing behind it right behind it. Then when background A completely passes your screen threshold you can "jump" background A back to its starting position and background B should then follow. Jumping right behind, creating a endless scrolling effect.

Microsoft has an example article using their XNA framework, which should be super easy to get going in whatever framework you are working in
https://msdn.microsoft.com/en-us/library/Bb203868.aspx

Okay. Cool! Thanks!

Another technique for horizontal and vertical background wrapping is to use UV linear wrapping state with the device so you only need to draw the background once and the hardware takes care of the wrapping.

First you need to figure out how to create a background that when wrapped - it won't appear to have seams. This can be done by copying the background to 4 layers with each layer moved to a corner with their tips touching in the center to expose the seams that would show when scrolling. Then with a 50% opaque stamp tool, smudge tricks and other art techniques to hide seams. Now this art can scroll without seams appearing.

Then when rendering a texture, you would want the sampler state to use linear wrapping and when you draw it:

(using SamplerState.LinearWrap)

Draw(background, screenRect, new Rectangle((int)background_pos.X, (int)background_pos.Y, background.Width, background.Height), ColorTint);

Where screenRect is your destination screen rectangle(always the same), and the other rectangle is the source rectangle (x,y, width, height). When the source sampling starts at x, y and exceeds the edges of the texture (cuz trying to go width and height), it will wrap the texture to continue sampling. So then when the player moves you just change background position in that direction.

For layers the same technique could be applied.

Hypothetically, for huge mapped backgrounds, you may want to seamlessly tile parts together and scroll through sections of the grid -- each tile in the grid can tell it which part of which background art to show. This way you could have extensive changes to background scenery as the foreground scrolls.

Another solution, in which you don't even need to keep track of when the background need to "jump" back to position is to use modulus (%).

Let say your width is 5 pixels and you move the background one pixel at time and you modulus the coordinates with the screen width will give you the following result:

1 % 5 = 1

2 % 5 = 2

3 % 5 = 3

4 % 5 = 4

5 % 5 = 5

6 % 5 = 1 // After five it's just repeating itself over again

7 % 5 = 2

8 % 5 = 3

9 % 5 = 4

10% 5 = 5

11 % 5 = 1 // And again after reaching 11

You will need to backgrounds for this to work. The second one placed at the end of the other one (+5), And yes, this will mean that at one point, both backgrounds is drawn at exact the same spot.

5 % 5 = 5
10% 5 = 5

These are incorrect. They should be:

5 % 5 = 0

10 % 5 = 0

The modulo operator returns the remainder of a division operation. 5 / 5 has no remainder, so 5 % 5 = 0