I have an image that I'd like to add as an :after element to a nav bar. The point being that the :after would cover the top portion of the next section (this is part of the design).
The :after is set as position: absolute with a top: 100% and it seems to disappear under the next element and z-index hasn't helped. When the top is set to anything less than 100%, you can see the :after element above the nav.
The markup:
<nav>Contents</nav>
<div>Contents</div>
The CSS:
nav {
width: 100%;
position: relative;
}
nav:after {
content: '';
width: 100%;
height: 66px;
background-image: url('image.png');
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 100%;
}
No CSS for div yet...
Thanks in advance!
All you need is to set the z-index on the Content div to lower than that of the pseudo-element but note that the Content div must have a position setting on anything other than static...position:relative is usually sufficient.
Alternatively, just set the z-index of the pseudo-element to higher than that of the div (which will probably default to 1).
nav {
width: 100%;
position: relative;
height: 50px;
background: lightgreen;
}
nav:after {
content: '';
width: 100%;
height: 66px;
background: rgba(0, 0, 255, 0.5);
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 100%;
z-index: 2;
}
div {
height: 260px;
position: relative;
background: rgba(255, 0, 0, 0.5);
}
<nav>Nav</nav>
<div>Contents</div>
Related
I have a problem. I know the bug that exists with backdrop-filter when I use it on a parent div that has child divs that use position: absolute. So I decided to do the blur effect using the :before, but the problem comes when I use the position: relative on the parent div, because inside there are other child divs using position: absolute that I want to fill the whole monitor.
Here is an example.
body {background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900)}
.paris {position: relative; width: 200px; height: 200px; background: #0000004d}
.paris:before {content: ""; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(10px); top: 0; left: 0; display: block}
.london {position: absolute; background: red; width: 100%; height: 50px; top: 50px}
<div class="paris">
<div class="london"></div>
</div>
If I remove the position: relative from the class named "Paris", it will bug the backdrop-filter as it will fill the whole screen with blur, but if I include it, it will bug the div class named "London", as it will no longer occupy 100% of the screen, but the one of the parent div.
What alternative do I have?
(I can't change the order because the site is not mine, it's a forum that doesn't allow to change the order of the code).
that's what I would suggest
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900);
}
.paris {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
}
.london {
position: absolute;
background: red;
width: 100%;
height: 50px;
top: 50px;
}
<div class="paris">
<div class="london"></div>
</div>
The footer does not show the image above the footer.
Screenshot:
Image is under footer
Source Code
.footer-area {
background-position: center;
position: relative;
z-index: 5; }
.footer-area::before {
position: absolute;
content: '';
bottom: 0;
left: 0;
height: 50pc;
width: 100%;
background-image: url(../images/footer-bg.svg);
background-position: center;
overflow: hidden;
The attribute z-index will not be applied to the pseudo element :before, if you want image in the front layer, you have to apply the z-index in the before element
My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus "lightening" the background of the div. The "overlay" must be UNDER the contents of the div, though. So, in the following example:
<div class="container">
<div class="content">
<h1>Hello, World</h1>
</div>
</div>
.container {
background-color: red;
width: 500px;
height: 500px;
position: relative;
}
.content {
background-color: blue;
width: 250px;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, .8);
}
The .content div should not be "underneath" the white overlay, aka .container::before.
I would prefer not having to use z-index on .content, but I can if that is the only solution.
End goal: The red should be covered while the text and blue are not.
JS fiddle: http://jsfiddle.net/1c5j9n4x/
If the pseudo element has a z-index, then you would need to position the .content element and add a z-index value to establish a stacking context.
Updated Example
.content {
background-color: blue;
width: 250px;
position: relative;
z-index: 1;
}
..you could also remove the z-index from the pseudo element and then merely position the .content element. In doing so, none of the elements need a z-index. The reason this works is because the :before pseudo element is essentially a previous sibling element. Thus, the succeeding .content element is positioned on top.
Alternative Example
.content {
background-color: blue;
width: 250px;
position: relative;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}
I am trying to do a challenge from frontend mentor where you have some div elements with curve images on top and bottom. I am trying to do it with before and after pseudo elements like this
.feature__item {
width: 100%;
position: relative;
margin: 200px 0;
padding: 50px;
}
.feature__item-1::before {
content: '';
width: 100%;
height: 139px;
background-image: url('../images/bg-section-top-desktop-1.svg');
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
left: 0;
top: -139px;
}
.feature__item-1::after {
content: '';
width: 100%;
height: 139px;
background-image: url('../images/bg-section-bottom-desktop-1.svg');
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
left: 0;
bottom: -139px;
}
The element located at the bottom does not create a problem. But the top element crashes when I play with the width of the browser. Is there a way to make bottom of the :before element sit on top of the parent div? Or is there another way to fix this?
My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus "lightening" the background of the div. The "overlay" must be UNDER the contents of the div, though. So, in the following example:
<div class="container">
<div class="content">
<h1>Hello, World</h1>
</div>
</div>
.container {
background-color: red;
width: 500px;
height: 500px;
position: relative;
}
.content {
background-color: blue;
width: 250px;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, .8);
}
The .content div should not be "underneath" the white overlay, aka .container::before.
I would prefer not having to use z-index on .content, but I can if that is the only solution.
End goal: The red should be covered while the text and blue are not.
JS fiddle: http://jsfiddle.net/1c5j9n4x/
If the pseudo element has a z-index, then you would need to position the .content element and add a z-index value to establish a stacking context.
Updated Example
.content {
background-color: blue;
width: 250px;
position: relative;
z-index: 1;
}
..you could also remove the z-index from the pseudo element and then merely position the .content element. In doing so, none of the elements need a z-index. The reason this works is because the :before pseudo element is essentially a previous sibling element. Thus, the succeeding .content element is positioned on top.
Alternative Example
.content {
background-color: blue;
width: 250px;
position: relative;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}