Совмещение сетки макета блоком для фона

375
24 ноября 2016, 10:09

Не получается совместить резиновый макет с блоком, который будет выступать в роли статичного фона (чистый CSS). То макет сваливается под body, то страница с контентом не скроллится. Кучу вариаций перепробовал с z-index, position, float....а до ума довести не получается. Может глянет кто?

HTML

/*
=================================
           LANDSCAPE
=================================
*/
<div class="landscape">
<div class="sun"></div>
<div class="level l1">
  <div class="windmill s1">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s1">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s1">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
</div>
<div class="level l2">
  <div class="windmill s2">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s2">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s2">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
</div>
<div class="level l3">
  <div class="windmill s3">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s3">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s3">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
</div>
<div class="level l4">
  <div class="windmill s4">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s4">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
  <div class="windmill s4">
    <div class="turbine">
      <div class="t t1"></div>
      <div class="t t2"></div>
      <div class="t t3"></div>
    </div>
  </div>
</div>
/*
=================================
           MENU LAYOUT
=================================
*/
<div class="container">
<header class="header"></header>
<main class="main">
  <article class="content"><p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p>
  </article>
</main>
  <footer class="footer"></footer>
  </div>

</div>

CSS

/*
=================================
           LANDSCAPE
=================================
*/
* {box-sizing: border-box;}
*:before, *:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}
  html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #593c1e;
}
  .landscape {
  position: relative;
  height: 100%;
  background: #db9;
  overflow: hidden;
}
.landscape div {position: absolute;}
.sun {
  left: 50%;
  bottom: 200px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
  box-shadow: 0px -20px 200px #FFFF8C;
}
.level {
  left: 50%;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
}
.l1{bottom:-1850px;margin-left:-1100px;background:#d0a273}
.l2{bottom:-1700px;margin-left:-300px;background:#c4884d}
.l3{bottom:-1900px;margin-left:-800px;background:#a66f37}
.l4{bottom:-1800px;margin-left:-1700px;background:#80552b}
.windmill {width: 2px;}
.windmill .turbine {
  top: -5px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
    -webkit-animation: 7s rotate infinite linear;
      animation: 7s rotate infinite linear;
}
.windmill .t{left:2px;width:0;height:0;border-style:solid;border-color:transparent;-webkit-transform-origin:bottom;transform-origin:bottom}
.windmill.s1{width:2px;height:15px}
.windmill.s1 .t{top:-2px;left:4px;width:2px;height:7px;border-width:0}
.windmill.s2{height:20px;-webkit-transform:rotateY(120deg);-ms-transform:rotateY(120deg);transform:rotateY(120deg)}
.windmill.s2 .t{top:-10px;border-bottom-width:12px}
.windmill.s3{height:35px}
.windmill.s3 .t{top:-18px;border-bottom-width:20px}
.windmill.s4{height:50px}
.windmill.s4 .t{top:-28px;border-bottom-width:30px}
.l1 .s1{background:#d0a273}
.l1 .s1 .t{background:#d0a273}
.l2 .s2{background:#c4884d}
.l2 .s2 .t{border-bottom-color:#c4884d}
.l3 .s3{background:#a66f37}
.l3 .s3 .t{border-bottom-color:#a66f37}
.l4 .s4{background:#80552b}
.l4 .s4 .t{border-bottom-color:#80552b}
.s1:nth-child(1){top:-5px;left:870px}
.s1:nth-child(2){top:-12px;left:970px}
.s1:nth-child(3){top:-9px;left:1070px}
.s2:nth-child(1){top:125px;left:485px}
.s2:nth-child(2){top:85px;left:555px}
.s2:nth-child(3){top:50px;left:635px}
.s3:nth-child(1){top:-10px;left:780px}
.s3:nth-child(2){top:-30px;left:940px}
.s3:nth-child(3){top:-25px;left:1120px}
.s4:nth-child(1){top:-25px;left:1200px}
.s4:nth-child(2){top:28px;left:1380px}
.s4:nth-child(3){top:125px;left:1560px}
.t1{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.t2{-webkit-transform:rotate(120deg);transform:rotate(120deg)}
.t3{-webkit-transform:rotate(240deg);transform:rotate(240deg)}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
/*
=================================
            MENU STYLE
=================================
*/
.container {
  width: 100%;
  max-width: 980px;
  margin: auto;
  border: 2px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5%;
  min-height: 34px;
  position: relative;
  border: 2px solid #fff;
}
.container *:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 200px;
  text-align: center;
  font-family: consolas, monaco, monospace;
  color: #666;
  font-size: 28px;
  letter-spacing: -1px;
  height: 28px;
  line-height: 1;
  margin-top: -14px;
  margin-right: -100px;
}
.container .main {
  border: 0;
  padding: 0;
  background: #abc;
}
.container .main:before {
  top: 25%;
  color: #468;
}
.container .content:before, .container .sidebar:before {
  color: #fff;
}
.header {
  padding-bottom: 8%;
}
.header:before {
  content: "<header>";
}
.main {
  overflow: hidden;
}
.main:before {
  content: "<main>";
}
.content {
  overflow: hidden;
}
.content:before {
  content: "<article>";
}
.footer:before {
  content: "<footer>";
}

https://jsfiddle.net/p00z8zLa/

READ ALSO
Графическое оформление списка
CSS

Графическое оформление списка

Подскажите по списку с оформлением. Что изменить в коде, чтобы если было больше одной строчки в абзаце не сжимался background для номера? Возможно...

 485
Float li - одинаковый вертикальный отступ вместо наибольшего
CSS

Float li - одинаковый вертикальный отступ вместо наибольшего

Есть ul с такими стилями:.

378
как добавить 0 код дням в календаре?
CSS

как добавить 0 код дням в календаре?

не работают 0 в от 1-9 в календаре тоесть все даты прдсвечиваются а вот все что от 1 до 9 нет я так понимаю нужен ноль но как его добавить в код...

 373
Не отображается картинка в a.menu:visited в CSS
CSS

Не отображается картинка в a.menu:visited в CSS

При наведении, фокусе, visited, активации и псевдокселекторе link должно отображать рисунок. Visited не работает.

371