0
Я сделал этот макет, пытаясь убежать от квадратного переплетения, но мне очень сложно использовать Z-индекс для перекрытия фона. 
Может ли этот макет быть выполнен в CSS?
до сих пор у меня есть этот код:
<!--#############################################
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 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 </b><br>Hoje é dia de festea</p>
</div>
</div>
</div>
</div>
</div>
<!--#############################################
CONTACTS
##################################################-->
<div id="contacts" class="contacts margin-bottom ">
<div class="background-contacts fadeInDown">
<div class="container">
<div class="row">
<div class="col-md-offset-8 col-md-4">
<h2>Get in Touch</h2>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h4 class="text-center">[email protected]</h4>
<form action="form_process.php" method="post" name="contact_form">
<h5>Nome*</h5> <input name="nome" type="text"/>
<h5>E-mail*</h5> <input name="email" type="text"/>
<h5>Mensagem*</h5> <textarea name="mensagem"></textarea>
<h5><input name="Enviar" class="btnenviar" type="submit" value="Enviar">
</h5>
</form>
<div class="row">
<div class="col-md-12 ">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="//unlogical.us10.list-manage.com/subscribe/post?u=83f9f68950845e6c634dd8200&id=82cabd68de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p>Subscribe our Newsletter</p>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group input-group">
<strong>Email Format </strong>
<ul><li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0">Normal</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1">Only text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_83f9f68950845e6c634dd8200_82cabd68de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btnenviar"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-5">
<iframe width="550" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Lisboa%2C%20Portugal&key=AIzaSyAgl9y77GTrQ5NMnggxIiAZAodYOYEThvM">
</iframe>
<div class="row social_icons">
<div class="col-md-2">
<a href=""><img src="img/facebook.png" width="32" height="32" alt="Facebook UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/youtube.png" width="32" height="32" alt="Youtube UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/google.png" width="32" height="32" alt="Google+ UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/twitter.png" width="32" height="32" alt="Twitter UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/resident_advisor.png" width="32" height="32" alt="Resident Advisor UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/instagram.png" width="32" height="32" alt="Instagram UNlogical"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(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;
}
я расположил рисунок в DIV Обертывания «контактов» и серый шаблон в другом сНе упаковке «о», но они не перекрывают друг друга , так что это может создать иллюзию, что это не прямоугольник.
Есть ли другой способ сделать это, или я делаю это неправильно?
Спасибо заранее! Cheers
Да, это можно сделать. –
Показать HTML. Но похоже, что у вас есть z-индексы назад. Элемент, который вы хотите сверху, должен иметь более высокий индекс z. – Malk
Я попытался вернуться, но не работал, я положил html спасибо –