Add a div in the middle of an image

Question

I have been studying Parallax, with ideas to use in future projects but I have a problem that left me stuck.

I leave down my test example:

body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('http://vwgolftuning.com/wp-content/uploads/2013/11/orangerabbit-mk1-golf.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax2 {
    /* The image used */
    background-image: url('http://wallup.net/wp-content/uploads/2016/01/137273-Volkswagen-golf_I-Golf_1.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.parallax3 {
    /* The image used */
    background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.text{
 text-align: center;
vertical-align: middle;
}

<div class="parallax"></div>

<div class="text" style="height:350px;background-color:red;font-size:36px"> div 1 </div>

<div class="parallax2"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 2 </div>

<div class="parallax3"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 3 </div>

<div class="parallax"></div>

What I wanted to do was add a div/image in the middle of the first image however this same image has to appear more than once but the div does not.

To clarify better I leave here an example.

Answer 1

I created a class .inner with the property transform to achieve this result.

There are several ways to centralize a divin another, follows a question quite interesting from Soen which shows some of these alternatives.

body,
html {
  height: 100%;
}

.parallax {
  /* The image used */
  background-image: url('http://vwgolftuning.com/wp-content/uploads/2013/11/orangerabbit-mk1-golf.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.parallax3 {
  /* The image used */
  background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: red;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 200px;
  font-size: 36px;
  text-align: center;
}

<div class="parallax">
  <div class="inner">div 1</div>
</div>


<div class="parallax2"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 2 </div>

<div class="parallax3"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 3 </div>

<div class="parallax"></div>