Full Screen Picture with Centered Text in a Wordpress Template File (php)

Question

This is my current page: http://www.texaspaceauthority.org/travis-county/

I would like the title at the top ("Travis County") to be white text centered on a full width photo, such as that found at: http://www.pelotonu.org/

I am editing from a template file, relevant code:

<div class="state-page-content container" id="state-page-container">
    <div class="row">
        <div class="row">
            <!--// PAGE TITLE --> 
            <h1><? the_title()?></h1>

Is this possible to accomplish directly in the php? Or is there a better method? I run a nonprofit pretty budget constrained, and so I have to do most of my coding myself.

In Sum, the questions: -How do I add a full width photo? -How do I then paste text over it?

Thanks for any help!

Answer 1

I'm not sure to have understood your question but you can do something like:

<div class="state-page-content container" id="state-page-container">
    <div class="row">
        <div class="row">
            <!--// PAGE TITLE --> 
            <h1 style="text-align:center;"><? echo get_the_title()?></h1>

Answer 2

The change should be made in your CSS file not the php. Im on mobile so i cant inspect it but its generally a simple text align / position change. You can do a relative position based on Your image container and use a "vw" text size to make it responsive