Responsive containers with shapes - css

Question

I am trying to create this layout:
LINK
I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?

Answer 1

You can do it in two ways 1)using bootstrap classes 2)using #media and for showing proper image according to div size you can use .className{background-size:contain;background-repeat:no-repeat}

Answer 2

You may use flex, transform and pseudo to hold backgrounds:
/* http://codepen.io/gc-nomade/pen/vGvRPZ */
html,
body {
height: 100%;
width:100%;
margin: 0;
overflow: hidden;
}
body > div {
position:relative;
min-height: 100%;
width:100%;
display: flex;
width: 160%;
margin: 0;
margin-left: -30%;
}
div div {
display: flex;
align-items: center;
transform: skew(-30deg);
overflow: hidden;
border-left: solid;
flex: 4;
position: relative;
}
div div h2 {
font-size: 5vw;
color: turquoise;
text-shadow: 0 0 1px black;
position: relative;
text-align: center;
width: 100%;
transform: skew(30deg);
}
div div:nth-child(1) h2 {
padding-left: 50%;
}
div div:nth-child(3) h2 {
padding-right: 50%;
}
div div:before {
transform: skew(30deg);
content: '';
top: 0;
bottom: 0;
right: -50%;
left: -50%;
position: absolute;
background: url(http://hd.wallpaperswide.com/thumbs/grungy_background-t2.jpg ) center tomato;
background-size: 100vw auto;
}
div div:nth-child(2):before {
background: url(http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg) center right gray;
background-size: 100vw auto;
}
div div:nth-child(3):before {
background: url(https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg) center right turquoise;
background-size: 100vw auto;
}
div div:nth-child(2) {
flex: 2.5;
}
<div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
</div>