Фоновое изображение блока

[kavi]

Казалось бы простой вопрос, но немогу никак справиться - нужно каждому из блоков дать свое фоновое изображение. Помогите пожалуйста.

http://test3.san-marco.in.ua/

Цитата

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,900&subset=latin,cyrillic);
<style><style>body
{
	background: url(../images/bg-rr.jpg) #F3F0EB;
	background-size: cover;
	font: normal 100% 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}
.content
{
	margin: 0 auto;
	max-width: 100%;
	width: 1200px;
}
.bulletsBlock:after
{
	clear: both;
	content: "";
	display: table;
}
.bulletsBlock > div
{
	background: rgba(0,0,0,0.3);
	cursor: pointer;
	float: left;
	margin-left: 5%;
	padding-bottom: 31.7%;
	position: relative;
	text-align: center;
	transition: all 0.35s linear;
	webkit-transition: all 0.35s linear;
	width: 30%;
}
.bulletsBlock > div:first-child
{
	margin-left: 0;
}
.bullet-item span
{
	background: url("../image/bg-rr.jpg") #F3F0EB;
	color: #fff;
	display: block;
	font-size: 12.5em;
	left: 0;
	line-height: 1.5em;
	position: absolute;
	top: 0;
	transition: all 0.35s ease;
	webkit-transition: all 0.35s ease;
	width: 100%;
}
.hideText, .titleBullet
{
	bottom: 0;
	color: #fff;
	left: 0;
	margin: 0;
	position: absolute;
	text-align: center;
	transition: all 0.35s ease;
	webkit-transition: all 0.35s ease;
	width: 100%;
}
.titleBullet
{
	background: #3B3B3B;
	font-size: 2.1875em;
	line-height: 2.5em;
	z-index: 10;
}
.hideText
{
	background: #3B3B3B;
	font-size: 1.25em;
	font-weight: 300;
	height: 70px;
	line-height: 1.3em;
	padding: 1em 0;
	transition: all 0.35s linear 0.2s;
	webkit-transition: all 0.35s linear 0.2s;
	z-index: 8;
}
.bulletsBlock > div:hover span.iconBullet
{
	font-size: 10.625em;
	line-height: 1.35em;
	top: -2.7%;
}
.bulletsBlock > div:hover
{
	box-shadow: 0 35px 35px -35px #000000;
	moz-box-shadow: 0 35px 35px -35px #000000;
	webkit-box-shadow: 0 35px 35px -35px #000000;
}
.bulletsBlock > div:hover p.titleBullet
{
	bottom: 80px;
}
.bulletsBlock > div:hover p.hideText
{
	background: #454545;
}
h1.title
{
	color: #f8f8f8;
	font-size: 60px;
	line-height: 75px;
	margin: 20px auto 0;
	text-align: center;
	width: 70%;
}
h1.title span
{
	display: block;
	font-size: 40px;
}
p.info
{
	background: #fff;
	line-height: 30px;
	margin: 30px auto 50px;
	text-align: center;
	width: 30%;
}
@media screen and (max-width: 1140px)
{
	.bullet-item span
	{
		font-size: 9.5em;
		line-height: 1.6em;
	}
	.bulletsBlock > div:hover span.iconBullet
	{
		font-size: 8em;
		line-height: 1.5em;
		top: -1%;
	}
}
@media screen and (max-width: 960px)
{
	.bullet-item span
	{
		font-size: 8em;
		line-height: 1.5em;
	}
	.bulletsBlock > div:hover span.iconBullet
	{
		font-size: 6em;
		line-height: 1.2em;
		top: -0.8%;
	}
	.titleBullet
	{
		font-size: 1.8em;
		line-height: 2.5em;
	}
	.hideText
	{
		font-size: 1em;
		line-height: 1.3em;
	}
}
@media screen and (max-width: 768px)
{
	.bulletsBlock > div
	{
		float: none;
		height: 320px;
		margin: 0 auto 20px;
		min-width: 300px;
		padding-bottom: 0;
		width: 50%;
	}
	.bulletsBlock > div:first-child
	{
		margin: 0 auto 20px;
	}
	.bullet-item span
	{
		font-size: 10.5em;
		line-height: 1.5em;
	}
	.bulletsBlock > div:hover span.iconBullet
	{
		font-size: 8.625em;
		line-height: 1.35em;
		top: -2.7%;
	}
	.titleBullet
	{
		font-size: 2.1875em;
		line-height: 2.5em;
	}
	.hideText
	{
		font-size: 1.25em;
		line-height: 1.3em;
	}
}
.backToSitehereBtn
{
	background: #01BC78;
	border-radius: 50%;
	color: #fff;
	display: block;
	font-size: 20px;
	height: 150px;
	left: -40px;
	line-height: 170px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	top: -40px;
	transform: rotate(-45deg) scale(1);
	transition: all 0.25s linear;
	width: 150px;
}
.backToSitehereBtn:hover
{
	left: -10px;
	text-decoration: none;
	top: -10px;
	transform: rotate(-45deg) scale(1.3);
}
</style><h1 class="title">Добро пожаловать на наш сайт</h1>
<div class="content">	<div class="bulletsBlock">
  
  	<div class="bullet-item"><p class="titleBullet">Выгода 1</p>
				<p class="hideText">Дополнительный<br>скрытый текст 1</p>
			</div>
  
			<div class="bullet-item"><p class="titleBullet">Выгода 2</p>
				<p class="hideText">Дополнительный<br>скрытый текст 2</p>
			</div>
  
			<div class="bullet-item"><p class="titleBullet">Выгода 3</p>
				<p class="hideText">Дополнительный<br>скрытый текст 3</p>
			</div>
	</div>
</div>

 

 

Змінено 25 квітня 2017 користувачем kavi

[thentru]

пробуйте так для 3 шт

.bulletsBlock > div:nth-child(1)
{
	background: url(images/hand1.png);
}

.bulletsBlock > div:nth-child(2)
{
	background: url(images/hand2.png);
}

.bulletsBlock > div:nth-child(3)
{
	background: url(images/hand3.png);
}

 

[kavi]