z-index problem with multi-layer background - html

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>
btn1
</li>
<li>
btn2
</li>
<li>
btn3
</li>
</ul>
</div>
<div id="mobile_menu"></div>
<div id="index_navigation_right">
btn4
</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>
Problem:
Even though I visually achieved it, there's a significant concern for practical usage.
If you look at the code, #about_pattern is a background image P and #about_pattern_2 is a gradient image.
#about_center element that is stuck between header and footer, must have lower z-index compared to #about_pattern (so it can pass through) and equal or higher z-index compared to #about_pattern2 (so we don't have gradient effect there).
But #about_pattern being on the top, makes every element in #about_center not accessible to user. Which seems to be a big problem if someone wants to for example scroll through text...
Is it possible to achieve this effect without blocking the central element? Thank you!

Answer 1

A solution is to remove z-index from #about_center to avoid stacking context issue1 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>
btn1
</li>
<li>
btn2
</li>
<li>
btn3
</li>
</ul>
</div>
<div id="mobile_menu"></div>
<div id="index_navigation_right">
btn4
</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>
1For a more accurate explanation we can refer to the specification:
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.
So by removing z-index it will fall back to auto and we removed the restriction of making our elements in the stacking context of their parent and controled by the z-index of their parent. They now belong to the upper stacking context which is the same as the gradient.
In other words, adding z-index to the parent element will make z-index of child elements to only be consider inside their parent after that everything will be placed considering the z-index of the parent. Either everything will be above the gradient or everything below it.