I attempted to break away from the conventional square layout of the internet with this design, but I am struggling to utilize Z-index to layer the backgrounds effectively.
Here is the current code:
<!--#############################################
ABOUT
##################################################-->
<div id="about" class="about margin-top ">
<div class="background-about">
<div class="container ">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>About us</h2>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<img class="img-responsive" src="img/unlogical_logo_imagens.png"/>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-7">
<p>Dia 22, às 2h </b><br>Hoje é dia de festea, é o teu aniversário gosto muito de aniversario festa é muito bom tão bom que vou cagar, e prontos em vez de colocar lorem ipsion imporum gravidaet enio coiso e tal vai sobre uma festaDia 22, às 2h levar piças na mão </b><br>Hoje é dia de festea, é o teu...
(...Remaining content has been shortened for brevity...)
(the grey background with shape)
.background-about {
padding-top: 150px;
padding-bottom: 150px;
background: url(../img/aboutbackground.png) no-repeat center ;
background-size: cover;
position: relative;
z-index: 3;
}
(the pattern on the left)
.background-contacts {
position: relative;
padding-top: 50px;
background: url(../img/texture.png) no-repeat -100px -450px;
z-index: 2;
}
Although I tried positioning the patterns in separate divs wrapping "about" and "contacts", the overlap effect doesn't seem to work as intended. This leads to a rectangular appearance rather than breaking free from it.
Do you have another solution or am I approaching this incorrectly?
Thank you for your assistance! Best regards