Files to easily render the Text Over Image Editor on the front.

text-over-image.css

.banner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #708090
}

.banner--tall {
    height: 100vh;
}

.banner--mid {
    height: 80vh;
}

.banner--short {
    height: 50vh;
}

.banner--inner {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    max-width: 90%;
    color: white;
    text-shadow: 0 0 5px black;
}

.banner--tl {
    left: 5%;
    top: 5%;
}

.banner--tc {
    top: 5%;
    left: 5%;
    text-align: center;
    width: 90%;
}

.banner--tr {
    top: 5%;
    right: 5%;
    left: auto;
    width: auto;
}

.banner--ml {
    left: 5%;
    top: calc(33% - 1em);
}

.banner--mc {
    top: calc(33% - 1em);
    left: 5%;
    width: 90%;
    text-align: center;
}

.banner--mr {
    top: calc(33% - 1em);
    left: auto;
    right: 5%;
    width: auto;
}

.banner--bl {
    top: auto;
    bottom: 5%;
    left: 5%;
}

.banner--bc {
    top: auto;
    left: 5%;
    bottom: 5%;
    width: 90%;
    text-align: center;
}

.banner--br {
    top: auto;
    bottom: 5%;
    left: auto;
    right: 5%;
    width: auto;
}

TextOverImagePartial.cshtml

@model TextOverImage.Models.ImageWithText
@{

    // Use this code to render this partial in your template. Replace "banner" with whatever your property name is
    // Make sure to include @using TextOverImage.Models at the top of your template
    //@if(Model.Content.HasProperty("banner") && Model.Content.HasValue("banner"))
    //{
    //    @Html.Partial("TextOverImagePartial", Model.Content.GetPropertyValue<ImageWithText>("banner")
    //}

    // You could use banner.Media.GetCropUrl(width,height) here instead if you want to set it!
    var imageUrl = Model.Media != null ? Model.Media.Url : string.Empty;

    // Only render the style tag if the image url exists
    var style = !string.IsNullOrEmpty(imageUrl) ? MvcHtmlString.Create(" style=\"background: url(" + imageUrl + ") no-repeat center center; background-size: cover;\"") : MvcHtmlString.Empty;
}
<div class="banner banner--@Model.Height"@style>
    <div class="banner--inner banner--@Model.Position">
        <h1>@Model.Headline</h1>
        <h2>@Model.Subheadline</h2>
        @if (Model.Link != null)
        {
            <a href="@Model.Link.Url" target="@Model.Link.Target" class="button">@Model.Link.Name</a>
        }
    </div>
</div>

This works pretty well on all screen sizes, but could be tweaked to look even nicer on mobile. However, it does work and looks fine :)