Text centered above image

If I were going to try to do that I'd probably just use a grid. However if that doesn't work check out table and table-cell CSS properties.

For most folks the easiest way to do this is setting the image to the background of an HTML element in CSS. But in your HTML, your headline element or paragraph or both are child elements of the div that has the background.

It would look something like this:

<div class="background">
    <H1>Stay Connected</H1>
</div>

And then you would add a background image to the class background in CSS.

.background{
    Width:100%;
    Height:250px;/* whatever you want*/
    Background-image: URL("path_to_image_here/image.jpg");
}

H1{
text-align: center;
}

Now this will get you started but its up to you to clean it up. When you add images to the background in CSS, they have no reference to the box model flow in HTML. Basically, HTML doesn't know that the image is there at all. The only thing it does know is there's a div there with the class of background. This is why I gave .background a width and height because if you didn't, the box would collapse on the content and only show an image behind the H1. Its up to you to figure out how Mich image you want to show behind the text and then adjust height or my favorite, add just margins around the h1 to stretch out its parent element thus showing more picture which is a better way because it keeps it partially responsive.

The choice is yours. I hope that helps.