Getting An Image To Display Outside Of The Twitter Bootstrap 4 Container Whilst Text Displays Inside The Container

My title is not as descriptive or accurate as I believe it could be because I am not certain of how to phrase the issue more succinctly at this point. I will apologise up front for

Solution 1:

AFAIK, the best way to approach it is using a pseudo class. It adjusts along with the container and columns and therefore works responsively.

Demo: http://www.codeply.com/go/XVVG24waWi

.right {
    z-index: 0;
    color: #fff;
}

.right:before {
    background-image:url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */top: -15px;
    left: 0;
    bottom: -15px;
}

Demo

Also see: Get Two Columns with different background colours that extend to screen edge