python - Making the background move sideways in pygame

Question

I am trying to create a game using pygame and I am attempting to add a background to it (I have used some code from a YouTube video but this is not working). I also to not understand what the code is on about. I mean the background and does move but it automatically adds a new version of the background in the middle of the screen when the older background has not gone off screen yet:

class Background:
    def __init__(self, x, y, picture):
        self.xpos = x
        self.ypos = y
        self.picture = picture
        self.rect = self.picture.get_rect()
        self.picture = pygame.transform.scale(self.picture, (1280, 720))

    def paste(self, xpos, ypos):
        screen.blit(self.picture, (xpos, ypos))

    def draw(self):
        screen.blit(self.picture, (self.xpos, self.ypos))

while True:

background=pygame.image.load("C:/images/mars.jpg").convert_alpha()       

cliff = Background(0, 0, background)


rel_x = x % cliff.rect.width

cliff.paste(rel_x - cliff.rect.width, 0)
if rel_x < WIDTH:
    cliff.paste(rel_x, 0)
    x -= 1

This is what currently happens with my background [![what my problem looks like][1]][1]

[![What I want the background to move like ][2]][2]

This is what I want my background to look like (please ignore the sign it was the only one I could find)

I have now discovered what the real problem is

Answer 1

If you want to have a continuously repeating background, then you've to draw the background twice:

        +==================+
   +----||---------+------||------+
   |    ||         |      ||      |
   |    ||    1    |   2  ||      |
   |    ||         |      ||      |
   +----||---------+------||------+
        +==================+

You've to know the size of the screen. The size of the height background image should match the height of the screen. The width of the background can be different, but should be at least the with of the window (else the background has to be drawn more than 2 times).

bg_w, gb_h = size
bg =  pygame.transform.smoothscale(pygame.image.load('background.image'), (bg_w, bg_h))

The background can be imagined as a endless row of tiles. If you want to draw the background at an certain position pos_x, then you have to calculate the position of the tile relative to the screen by the modulo (%) operator. The position of the 2nd tile is shifted by the width of the background (bg_w):

x_rel = pos_x % bg_w
x_part2 = x_rel - bg_w if x_rel > 0 else x_rel + bg_w

Finally the background has to be blit twice, to fill the entire screen:

screen.blit(bg, (x_rel, 0))
screen.blit(bg, (x_part2, 0))

You can test the process by the following example program. The background can be moved by <- respectively ->

import pygame

pygame.init()

size = (800,600)
screen = pygame.display.set_mode(size)
clock = pygame.time.Clock()

bg_w, bg_h = size 
bg = pygame.transform.smoothscale(pygame.image.load('background.image'), (bg_w, bg_h))
pos_x = 0
speed = 10

done = False
while not done:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True

    allKeys = pygame.key.get_pressed()
    pos_x += speed if allKeys[pygame.K_LEFT] else -speed if allKeys[pygame.K_RIGHT] else 0

    x_rel = pos_x % bg_w
    x_part2 = x_rel - bg_w if x_rel > 0 else x_rel + bg_w

    screen.blit(bg, (x_rel, 0))
    screen.blit(bg, (x_part2, 0))

    pygame.display.flip()