title: Infinite scrolling background on libgdx
body: <p>I am trying to do an infinite scrolling background on libgdx.The image is scrolling fine in the X-axis, but in the Y-axis the image is split in half like shown in the picture below. How can I get the ground to start at the bottom of the screen? <a href="https://i.stack.imgur.com/5Wcg7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Wcg7.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code</p>
  
  <pre><code>    package com.tashtoons.game.States;
  
  import com.badlogic.gdx.Gdx;
  import com.badlogic.gdx.graphics.Texture;
  import com.badlogic.gdx.graphics.g2d.SpriteBatch;
  import com.tashtoons.game.BuckyRun;
  import static com.badlogic.gdx.graphics.Texture.TextureWrap.Repeat;
  
  
  
  public class PlaySate extends State {
      private Texture bg;
      float sourceX = 0;
  
      public PlaySate(GameStateManager gsm) {
          super(gsm);
         bg=new Texture("bg.png");
         cam.setToOrtho(false,BuckyRun.WIDTH/2,BuckyRun.HEIGHT/2);
          bg.setWrap(Repeat,Repeat);
      }
  
      @Override
      protected void handleInput() {
  
      }
  
      @Override
      public void update(float dt) {
  
      }
  
      @Override
      public void render(SpriteBatch sb) {
          sourceX += 10;
          sb.setProjectionMatrix(cam.combined);
          sb.begin();
          sourceX = (sourceX + Gdx.graphics.getDeltaTime() / 3/4) % bg.getWidth();
          sb.draw(bg, 0, 0, (int) sourceX, 0,BuckyRun.WIDTH, BuckyRun.HEIGHT);
          sb.end();
  
      }
  
      @Override
      public void dispose() {
  
      }
  
      }
  </code></pre>