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