How to make the text superimposed, to a responsive image, follow it

1

I have a background image (responsive) and a text above. When I decrease the window, the image decreases well, but the text stays on the other side. Can you guide me what to do? I'm not sure how to add the code.

@font-face {
  font-family: 'Sarala', sans-serif;
  src: url(url/fonts/Sarala-Bold.ttf) format(‘truetype’);
}

#main {
  width: 100%;
  margin: 0 auto;
}

#titulo {
  font-family: 'Sarala', sans-serif;
  font-size: 36px;
  font-weight: bold;
}

#texto {
  font-family: 'OpenSans', sans-serif;
  font-size: 1.125em;
}

.container-fluid {
  position: absolute;
  top: 0;
  left: 0;
  height: 1200px;
  width: 100%;
}

#container-fluid-0 {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  background-image: url("http://via.placeholder.com/350x150");
  height: 1200px;
}

#container-fluid-1 {
  position: absolute;
  top: 0;
  left: 0;
  background-image: ;
  height: 1200px;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

#paralelogramo2 {
  position: absolute;
  top: 1450px;
  width: 100%;
  left: 0;
  float: left;
  height: 900px;
  background: #015382;
  -webkit-transform: skewY(-8deg);
  -moz-transform: skewY(-8deg);
  -o-transform: skewY(-8deg);
}

.p1 {
  position: absolute;
  width: 100%;
  margin-top: 1050px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #015382;
  z-index: 1;
}

.p5 {
  position: absolute;
  top: 430px;
  width: 100%;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  line-height: 0.7;
  color: #ffffff;
  z-index: 1;
}

.p6 {
  position: absolute;
  top: 480px;
  font-size: 26px!important;
  font-weight: 100;
  text-align: center!important;
  color: #ffffff;
  z-index: 1;
}

#centrado {
  text-align: center;
}
<div class="container-fluid" id="container-fluid-0">
  <div id="centrado" class="p5">
    <p>BXXXXXXXXXXXXXXXXXXXXXXXR,</p>
  </div>
  <div id="centrado" class="p6">
    <p>EXXXXXXXXXXXXXXXXO...</p>
  </div>
</div>
<div class="container-fluid" id="container-fluid-1">
  <div id="paralelogramo1"></div>
  <div id="titulo" class="p1">
    <p>STAFF</p>
    <div style="margin-left: 47%; margin-right: 47%;border-top: 
    2px solid #a7f1fc;"></div>
  </div>
</div>

Appointment in block

    
asked by Olga L. V. 12.04.2018 в 04:56
source

0 answers