Add a div in the middle of an image

Question

Add a div in the middle of an image

Navigation

#1 by (1 votes)

1

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

I leave below 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 to 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.

For a better explanation, I'll leave here for an example.

html parallax

asked by anonymous 27.09.2017 / 15:56

1 answer

How to return a table from the xml in sql server How to open PDF in Delphi WebBrowser?

score 1 · Accepted Answer

I created a .inner class with the property transform to get to that result.

There are several ways to center a div in another, follows a question very interesting from SOen that 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>