Why is this not displaying my background image title.png?

Question

apologies in advance for the very newbie question, currently trying to learn libGDX, every tutorial suggests this should work, its correctly displaying the text button in the centre of the screen however it isnt showing the background image title.png.

ive played around with it quite a bit to try and get it to work with no luck, any help you can give me would be greatly appreciated!

public class MainMenu implements Screen {

    ZebraGems game;
    Stage stage;
    BitmapFont font;
    BitmapFont blackfont;
    TextureAtlas atlas;
    Skin skin;
    SpriteBatch batch;
    TextButton button;
    Texture titleTexture;
    Sprite titleSprite;

    public MainMenu(ZebraGems game){
        this.game = game;
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        stage.act(delta);

        batch.begin();
        titleSprite.draw(batch);
        stage.draw();
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
        if (stage == null);
        stage = new Stage (width, height, true);
        stage.clear();

        titleTexture = new Texture("data/title.png");

        titleSprite = new Sprite(titleTexture);
        titleSprite.setColor(1,1,1,0);
        titleSprite.setSize(480, 800);
        titleSprite.setPosition (0, 0);

        Gdx.input.setInputProcessor(stage);

        TextButtonStyle style = new TextButtonStyle();
        style.up = skin.getDrawable("play");
        style.down = skin.getDrawable("playpressed");
        style.font = blackfont;

        button = new TextButton("", style);
        button.setWidth(213);
        button.setHeight(94);
        button.setX(Gdx.graphics.getWidth() /2 - button.getWidth() /2);
        button.setY(Gdx.graphics.getHeight() /2 - button.getHeight() /2);

        stage.addActor(button);
    }

    @Override
    public void show() {

        batch = new SpriteBatch();
        atlas = new TextureAtlas("data/playButton.pack");
        skin = new Skin();
        skin.addRegions(atlas);

        blackfont = new BitmapFont(Gdx.files.internal("data/blackfont.fnt"));
    }

    @Override
    public void hide() {
        dispose();
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void dispose() {
        batch.dispose();
        skin.dispose();
        atlas.dispose();
        stage.dispose();
        blackfont.dispose();
    }
}

Answer 1

Move stage.draw() out of the batch.begin() and batch.end().

Furthermore in case you are using the latest nighty build of libgdx, you should add stage.getViewport().update(width, height, true) to your resize(...) method.

Furthermore you are doing this titleSprite.setColor(1,1,1,0) which sets the alpha of the background sprite to 0 which means 100% transparent = invisible.

Do this instead: titleSprite.setColor(1,1,1,1).

In total your render should look like this:

batch.begin();
titleSprite.draw(batch);
batch.end();

stage.act(delta);
stage.draw();