Return to Question

I'm trying to scroll my background forever and so I'm using the background image twice. When the first one goes off screen, it should relocate to the end of the second one. However, there seems to be a black bar inbetween the two images and so it seems that the image is not being moved into place quick enough. What would be the algorithm to do such a thing to give the illusion of a continuous background? I've got this at the moment (which loops, but with a black bar in between the background image)

 GeneralTransform gt = bg1Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg1Offset = gt.Transform(new Point(0, 0));
       

 GeneralTransform gt2 = bg2Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg2Offset = gt2.Transform(new Point(0, 0));
        
       
 bg1.TranslateX -=  playerVel.X; //bg1 and bg2 are the composite transforms for the canvas
 bg2.TranslateX -=  playerVel.X;

 if (bg1Offset.X < -bg_width)
     bg1.TranslateX -= bg1Offset.X - bg_width;
 if (bg2Offset.X < -bg_width)
     bg2.TranslateX -= bg2Offset.X - bg_width;

Any ideas?

Edit - Updated code

I'm trying to scroll my background forever and so I'm using the background image twice. When the first one goes off screen, it should relocate to the end of the second one. However, there seems to be a black bar inbetween the two images and so it seems that the image is not being moved into place quick enough. What would be the algorithm to do such a thing to give the illusion of a continuous background? I've got this at the moment (which loops, but with a black bar in between the background image)

 GeneralTransform gt = bg1Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg1Offset = gt.Transform(new Point(0, 0));
       

 GeneralTransform gt2 = bg2Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg2Offset = gt2.Transform(new Point(0, 0));
        
       
 bg1.TranslateX -=  playerVel.X; //bg1 and bg2 are the composite transforms for the canvas
 bg2.TranslateX -=  playerVel.X;

 if (bg1Offset.X < -bg_width)
     bg1.TranslateX -= bg1Offset.X - bg_width;
 if (bg2Offset.X < -bg_width)
     bg2.TranslateX -= bg2Offset.X - bg_width;

Any ideas?

Edit - Updated code Edit 2: New code with three images (all same width). Works for the first few scrolls, then suddenly stops working and no background is displayed.

if (bg1Offset.X < -bg_width )
                bg1.TranslateX = bg3Offset.X+bg_width;
                
            if (bg2Offset.X < -bg_width )
                bg2.TranslateX = bg1Offset.X + bg_width;

            if (bg3Offset.X < -bg_width)
                bg3.TranslateX = bg2Offset.X + bg_width;

I'm trying to scroll my background forever and so I'm using the background image twice. When the first one goes off screen, it should relocate to the end of the second one. However, there seems to be a black bar inbetween the two images and so it seems that the image is not being moved into place quick enough. What would be the algorithm to do such a thing to give the illusion of a continuous background? I've got this at the moment (which loops, but with a black bar in between the background image)

 GeneralTransform gt = bg1Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg1Offset = gt.Transform(new Point(0, 0));
       

        GeneralTransform gt2 = bg2Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg2Offset = gt2.Transform(new Point(0, 0));
        
       
        bg1.TranslateX -=  playerVel.X;
         bg2.TranslateX -=  playerVel.X;

        if (bg1Offset .X < -bg_width)
            bg1.TranslateX -= bg1Offset .X - bg_width;
        if (bg2Offset .X < -bg_width)
            bg2.TranslateX -= bg2Offset .X - bg_width;

Any ideas?

Edit - Updated code

I'm trying to scroll my background forever and so I'm using the background image twice. When the first one goes off screen, it should relocate to the end of the second one. However, there seems to be a black bar inbetween the two images and so it seems that the image is not being moved into place quick enough. What would be the algorithm to do such a thing to give the illusion of a continuous background? I've got this at the moment (which loops, but with a black bar in between the background image)

 GeneralTransform gt = bg1Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg1Offset = gt.Transform(new Point(0, 0));
       

 GeneralTransform gt2 = bg2Canvas.TransformToVisual(Application.Current.RootVisual as UIElement);
        Point bg2Offset = gt2.Transform(new Point(0, 0));
        
       
 bg1.TranslateX -=  playerVel.X; //bg1 and bg2 are the composite transforms for the canvas
 bg2.TranslateX -=  playerVel.X;

 if (bg1Offset.X < -bg_width)
     bg1.TranslateX -= bg1Offset.X - bg_width;
 if (bg2Offset.X < -bg_width)
     bg2.TranslateX -= bg2Offset.X - bg_width;

Any ideas?

Edit - Updated code