One possible approach:
The idea is to establish a window where the background images are visible...
To achieve this, create a fixed element with a z-index of around 10, followed by positioning your images at a z-index of 1 to place them behind the window. Then set the z-index of your text to 20 so that it appears on top.
Below is a basic code sample:
https://codepen.io/anon/pen/LzQrYa
Code:
<div class="container">
<div class="cover top"></div>
<div class="cover right"></div>
<div class="cover bottom"></div>
<div class="cover left"></div>
<div class="bg-image one"></div>
<div class="bg-image two"></div>
<div class="bg-image three"></div>
<p class="text one">Text 1</p>
<p class="text two">Text 2</p>
<p class="text three">Text 3</p>
</div>
CSS:
.container {
position: relative;
display: inline-block;
width: 100%;
float: left;
}
.container .cover {
position: fixed;
display: inline-block;
background-color: #ffffff;
z-index: 10;
}
.container .cover.top {
top: 0; left: 0;
width: 100%;
height: 120px;
}
.container .cover.right {
top: 0; right: 0;
width: 100px;
height: 100%;
}
.container .cover.bottom {
bottom: 0; left: 0;
width: 100%;
height: 120px;
}
.container .cover.left {
top: 0; left: 0;
width: 500px;
height: 100%;
}
.container .bg-image {
position: relative;
display: inline-block;
width: 100%;
height: 400px;
float: left;
}
.container .bg-image.one { background-color: #cccccc; }
.container .bg-image.two { background-color: #8ec640; }
.container .bg-image.three { background-color: #ff00ff; }
.container .text {
position: absolute;
display: inline-block;
font-size: 40px;
color: #000000;
z-index: 20;
}
.container .text.one {
top: 40px;
left: 50px;
}
.container .text.two {
top: 500px;
left: 50px;
}
.container .text.three {
top: 940px;
left: 50px;
}