How can i stop this image from moving? - php

Question

I'm updating my work website using Joomla - I've been given the old copy and I need to improve it. (The website is 24x7cloud.co.uk) towards the bottom I want to create an "Accreditation's" section, however, every time I add this section it affects my "Contact Us" section which is below it. (Attached screenshots to show)
The grey overlay should go over the whole image and the image shouldn't be stretched so far down. It should cut off where the grey goes across the telephone box. It's like this when the section above is not there, but as soon as I create it - it pushes the image and creates this effect...
The Orange scribble is the part that is broken. That part of the scribble shouldn't be there. It should cut off where the grey banner stops
What the website should look like
What it looks like when adding a new section above
This is the HTML for the "Contact Us"
/* ==== 18) Contact Details ==== */
#contact {
background-position: center 0%;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../img/bg_8.jpg);
display: table;
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: middle;
z-index: 1;
color: #121212;
}
.details {
margin-top: 20px;
margin-bottom: 20px;
color: #fff;
z-index: 3;
}
.phone-info {
line-height: 0;
border-radius: 3px;
display: inline-block;
color: #fff;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
}
.blah a {
color: #ffffff;
font-weight: 300;
font-family: "Raleway", sans-serif;
}
/* Overlay on contact us */
}
.parallax-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44, 62, 80, 0.6);
z-index: 2;
}
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
<h2>Contact us</h2>
<p class="lead">We would love to work with you!</p>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h3><small class="white"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</small></h3>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
<h4>
<script type="text/javascript">
//<![CDATA[
<!--
var x = "function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\" +
"\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
"30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5#4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
"8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\" +
"\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
"230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
"%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")";
while (x = eval(x));
//-->
//]]>
</script>
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&view=rsform&formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
</div>
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://twitter.com/RedcelloUK">
<i class="icon ion-social-twitter ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.linkedin.com/company/redcello">
<i class="icon ion-social-linkedin ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.facebook.com/RedcelloUK">
<i class="icon ion-social-facebook ion-3x white"></i>
</a>
</div>
</div>
</div>
</div>
Not sure if this is helpful, but here is the element from firefox:
<section id="contact" data-stellar-background-ratio="1.0" data-stellar-vertical-offset="" style="background-position: 50% 0px;" class="current">
<div class="row text-center" style="position:relative;">
<div class="parallax-overlay"></div>
<div class="container content">
<div class="moduletable">
<div class="custom">
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
<h2>Contact us</h2>
<p class="lead">We would love to work with you!</p>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h3><small class="white"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</small></h3>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
<h4>
<script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\"+
"\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
"30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5#4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
"8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\"+
"\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
"230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
"%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")" ;
while(x=eval(x));
//-->
//]]>
</script>contact#redcello.co.uk
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&view=rsform&formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
</div>
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://twitter.com/RedcelloUK">
<i class="icon ion-social-twitter ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.linkedin.com/company/redcello">
<i class="icon ion-social-linkedin ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.facebook.com/RedcelloUK">
<i class="icon ion-social-facebook ion-3x white"></i>
</a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
Sorry for the bunch of code - I wanted to make sure I got everything that is needed to help. After trying multiple times - I cannot for the life of me solve this. Any help is much appreciated.

Answer 1

Change the #contact z-index:1 to z-index:-1;
#contact {
background-position: center 0%;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../img/bg_8.jpg);
display: table;
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: middle;
z-index: -1;
color: #121212;
}
This will get the image behind the text (one layer behind).
Reference
https://www.w3schools.com/cssref/pr_pos_z-index.asp