html - z-index problem with multi-layer background

Question

I'm trying to implement a specific design but have stumbled upon quite a lot of complexities by now.

The main problem remains the background of linear gradient - it shall be stretched on the whole viewport to have the satisfactory effect (position: absolute;width: 100%;height: 100%).

But that's not the only problem, we also have a background image P above that gradient image (with higher z-index and opacity 0.3) and the gradient shall be only visible for header and footer (anything below must only have P and not gradient).

And I did that. (JSFiddle, view the code below)

Code

#index_header {
  display: block;
  position: relative;
}

#index_navigation {
  position: relative;
  top: 0px;
  padding-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_logo {
  display: block;
  width: 150px;
  height: 52px;
  background-image: url("images/index/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#index_navigation_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_center {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_core {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  min-width: 420px;
  padding: 0;
  width: 60%;
}

#index_navigation_core li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#index_navigation_core li a {
  color: white;
  font-size: 1.250em;
  text-decoration: none;
  cursor: pointer;
}

#navigator_authentication {
  display: block;
  background-color: white;
  text-decoration: none;
  color: #860001;
  cursor: pointer;
  font-size: 1.125em;
  padding: 10px 30px 10px 30px;
  border-radius: 20px;
}

#index_footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_footer_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_left p {
  font-size: 0.938em;
  font-family: 'bpg_arialregular';
  color: white;
}

#social_media_btns {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
}

#social_media_btns li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

#social_media_btns li a {
  display: block;
  width: 30px;
  height: 30px;
}

#social_media_facebook {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/facebook.png");
}

#social_media_youtube {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/youtube.png");
}

#social_media_twitter {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/twitter.png");
}

.present {
  border-bottom: solid white 3px;
}

.nav_button {
  -webkit-transition: border 0.35s ease;
  -o-transition: border 0.35s ease;
  transition: border 0.35s ease;
}

.nav_button:hover {
  border-bottom: solid white 3px;
}

#mobile_menu {
  display: none;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background-image: url("images/icons/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@media only screen and (max-width: 880px) {
  #index_navigation {
    min-width: 300px;
  }
  #index_navigation_center {
    display: none;
  }
  #mobile_menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  #index_footer {
    min-width: 300px;
  }
}

@media only screen and (max-width: 500px) {
  #navigator_authentication {
    font-size: 0.9em;
    padding: 5px 10px 5px 10px;
  }
  #mobile_menu {
    width: 60px;
    height: 60px;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #F5F5F5;
}

#index_overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#index_header {
  z-index: 3;
}

#about_pattern {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://i.imgur.com/F8SFW2p.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

#about_pattern_2 {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
  border: 1px solid #000000;
  box-sizing: border-box;
}

#index_navigation {
  padding-bottom: 25px;
}

#nav_background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#about_center {
  position: relative;
  display: flex;
  z-index: -1;
  overflow-y: scroll;
  flex-grow: 1;
}

#about_background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F5F5F5;
  z-index: -1;
}

#foot_background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}

#intro_text {
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 1.125em;
  text-decoration: none;
  line-height: normal;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow-y: auto;
  text-align: left;
  color: #4F4F4F;
}

footer {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
  flex-shrink: 0;
  z-index: 3;
}

<!DOCTYPE html>
<html lang="ge">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="about.css" type="text/css" charset="utf-8">
  <link rel="stylesheet" href="universal.css" type="text/css" charset="utf-8">
</head>

<body>
  <div id="index_overlay">
    <div id="about_pattern"></div>
    <div id="about_pattern_2"></div>
    <header id="index_header">
      <div id="nav_background"></div>
      <div id="index_navigation">
        <div id="index_navigation_left">
          <a id="index_logo" href="/"></a>
        </div>
        <div id="index_navigation_center">
          <ul id="index_navigation_core">
            <li>
              <a href="/" class="nav_button present">btn1</a>
            </li>
            <li>
              <a href="/navigator" class="nav_button">btn2</a>
            </li>
            <li>
              <a href="/about_us" class="nav_button">btn3</a>
            </li>
          </ul>
        </div>
        <div id="mobile_menu"></div>
        <div id="index_navigation_right">
          <a href="/authentication" id="navigator_authentication">btn4</a>
        </div>
      </div>
    </header>
    <div id="about_center">
      <div id="about_background"></div>
      <div id="intro_text">
        <div style="text-align: center;">text here</div>
        <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <footer>
      <div id="foot_background"></div>
      <div id="index_footer">
        <div id="index_footer_left">
          <p>&copy 2018 mysite</p>
        </div>
        <div id="index_footer_right">
          <ul id="social_media_btns">
            <li>
              <a target="_blank" id="social_media_facebook"></a>
            </li>
            <li>
              <a target="_blank" id="social_media_youtube"></a>
            </li>
            <li>
              <a id="social_media_twitter"></a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
  <script src="scripts/jquery/jquery.js"></script>
  <script src="scripts/custom/main.js"></script>
</body>

</html>

Answer 1

A solution is to remove z-index from #about_center to avoid stacking context issue¹ then you will able to place #about_background and #intro_text like you want as they will be in the same stacking context of the gradient background. You can then place one below and the other above.

So you remove this:

#about_center {
  position: relative;
  display: flex;
  /*z-index: -1; */
  overflow-y: scroll;
  flex-grow: 1;
}

And add this:

#intro_text {
   ....
   z-index:3;
}

Full code:

https://jsfiddle.net/tfx9pLrq/3/

#index_header {
  display: block;
  position: relative;
}

#index_navigation {
  position: relative;
  top: 0px;
  padding-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_logo {
  display: block;
  width: 150px;
  height: 52px;
  background-image: url("images/index/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#index_navigation_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_center {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_core {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  min-width: 420px;
  padding: 0;
  width: 60%;
}

#index_navigation_core li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#index_navigation_core li a {
  color: white;
  font-size: 1.250em;
  text-decoration: none;
  cursor: pointer;
}

#navigator_authentication {
  display: block;
  background-color: white;
  text-decoration: none;
  color: #860001;
  cursor: pointer;
  font-size: 1.125em;
  padding: 10px 30px 10px 30px;
  border-radius: 20px;
}

#index_footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_footer_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_left p {
  font-size: 0.938em;
  font-family: 'bpg_arialregular';
  color: white;
}

#social_media_btns {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
}

#social_media_btns li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

#social_media_btns li a {
  display: block;
  width: 30px;
  height: 30px;
}

#social_media_facebook {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/facebook.png");
}

#social_media_youtube {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/youtube.png");
}

#social_media_twitter {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/twitter.png");
}

.present {
  border-bottom: solid white 3px;
}

.nav_button {
  -webkit-transition: border 0.35s ease;
  -o-transition: border 0.35s ease;
  transition: border 0.35s ease;
}

.nav_button:hover {
  border-bottom: solid white 3px;
}

#mobile_menu {
  display: none;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background-image: url("images/icons/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@media only screen and (max-width: 880px) {
  #index_navigation {
    min-width: 300px;
  }
  #index_navigation_center {
    display: none;
  }
  #mobile_menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  #index_footer {
    min-width: 300px;
  }
}

@media only screen and (max-width: 500px) {
  #navigator_authentication {
    font-size: 0.9em;
    padding: 5px 10px 5px 10px;
  }
  #mobile_menu {
    width: 60px;
    height: 60px;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #F5F5F5;
}

#index_overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#index_header {
  z-index: 3;
}

#about_pattern {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://i.imgur.com/F8SFW2p.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

#about_pattern_2 {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
  border: 1px solid #000000;
  box-sizing: border-box;
}

#index_navigation {
  padding-bottom: 25px;
}

#nav_background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#about_center {
  position: relative;
  display: flex;
  overflow-y: scroll;
  flex-grow: 1;
}

#about_background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F5F5F5;
  z-index: -1;
}

#foot_background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}

#intro_text {
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 1.125em;
  text-decoration: none;
  line-height: normal;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow-y: auto;
  text-align: left;
  color: #4F4F4F;
  z-index: 3;
}

footer {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
  flex-shrink: 0;
  z-index: 3;
}

<div id="index_overlay">
  <div id="about_pattern"></div>
  <div id="about_pattern_2"></div>
  <header id="index_header">
    <div id="nav_background"></div>
    <div id="index_navigation">
      <div id="index_navigation_left">
        <a id="index_logo" href="/"></a>
      </div>
      <div id="index_navigation_center">
        <ul id="index_navigation_core">
          <li>
            <a href="/" class="nav_button present">btn1</a>
          </li>
          <li>
            <a href="/navigator" class="nav_button">btn2</a>
          </li>
          <li>
            <a href="/about_us" class="nav_button">btn3</a>
          </li>
        </ul>
      </div>
      <div id="mobile_menu"></div>
      <div id="index_navigation_right">
        <a href="/authentication" id="navigator_authentication">btn4</a>
      </div>
    </div>
  </header>
  <div id="about_center">
    <div id="about_background"></div>
    <div id="intro_text">
      <div style="text-align: center;">text here</div>
      <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <footer>
    <div id="foot_background"></div>
    <div id="index_footer">
      <div id="index_footer_left">
        <p>&copy 2018 mysite</p>
      </div>
      <div id="index_footer_right">
        <ul id="social_media_btns">
          <li>
            <a target="_blank" id="social_media_facebook"></a>
          </li>
          <li>
            <a target="_blank" id="social_media_youtube"></a>
          </li>
          <li>
            <a id="social_media_twitter"></a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</div>