How can I set a background image for multiple divs?

Question

I am using four divs to display some services:

I want to use a background image for the four images like in this example:

http://de.wix.com/website-template/view/html/1326?originUrl=http%3A%2F%2Fde.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F1&bookName=create-master-new&galleryDocIndex=0&category=all&metaSiteId=

How can I do it? The resolution should be responsive so I can't use the crop tool to cut the image.

Answer 1

Here is the updated Demo

it's actually a play with position: absolute. the example site you are given also doing the same way. its actually <img> tag, not background

here is the Code:

.container{
	max-width: 600px;
	position: absolute;
	top: 10px;
}
img{
	max-width: 600px;
}
.divider{
	width: 10px;
	position: absolute;
	top: 0px;
	height: 100%;
	background: white;
}
.one{
	left: 150px;
}
.two{
	left: 300px;
}
.three{
	left: 450px;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"></div>
	<div class="divider two"></div>
	<div class="divider three"></div>
</div>