How to code this?

In my game, the background and foreground image’s dimension are equal to the size of the world.
So I just render them at coordinate 0:0 and achieve desired effect.
Example:

On some games, the background image is smaller than the world. In those cases, the background image is slowly moving when the camera is moving.
Example:

Anyone know how to code it?

I think you are talking about parallax.

The simplest way would be to draw one image at

image1.x = position.x

and the background image to draw at divided x coordinate:

background.x = position.x / 5

trollwarrior is right, that’s parallax scrolling. You can even do multiple layers, it starts to look pretty neat.

Okey, I did some googeling but couldn’t find an good answer.

Basically, I dont want a customized scroll factor.

Example:
When translateX(world) is 0, the the background’s position is also 0. As translateX increases, the background’s x coordinate also increases, at a speed so that when translateX == world.width, the background is at the right most.

How to achieve this?

Well, you can’t?

If you have two layers that are exactly the same dimension and want both to start at 0.0 and have the same dimension as the world, they simply can’t move at a different speed.

So there is no way around moving the layers with different increments. This also means they have to have different dimensions…

Start and end at same position, but move differently? I doubt that’s actually what you want, but it can definitely be done:

Google around for “easing function.”