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
Related
I'm trying to make the background-image of a parent stretched to a pseudo element.
I'm currently using the code below and it works in a sense that it's using the same image but the placement is not correct (see screenshot). I'd like this to be seamless.
.parent {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.parent::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background: inherit;
z-index: 1;
}
Setting the parent's background-attachement to fixed seems to make it work but then I get an unwanted parallax effect on the parent.
Is there a way to make this work in a way that allows me to stretch the background image but avoid parallax? All help much appreciated!
Make the pseudo element cover the whole element and only its background will be visible:
.parent {
position: relative;
background-image:url(https://picsum.photos/id/1018/800/800);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position:relative;
z-index:0;
height:100px;
}
.parent::after {
content: '';
position: absolute;
z-index:-1;
bottom: -15px;
left: 0;
width: 100%;
top:0;
background: inherit;
z-index: -1;
}
<div class="parent">
</div>
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?
i have a problem with the position: sticky and z-index
I want my modal in the sticky-element to be overlayed by the overlay.
With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay.
Hope it's understandable what I mean.
Here's the example:
.sticky {
position: sticky; /* <-- dosen't work */
/* position: relative; /* <-- work */
top: 0;
width: 100%;
height: 200vh;
background: red;
}
.modal {
z-index: 1000;
position: fixed;
margin: 0 auto;
width: 200px;
height: 200px;
background: yellow;
margin: 0 auto;
}
.overlay {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
background: green;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.75;
}
<div class="overlay"></div>
<div class="sticky">
<div class="modal">modal</div>
</div>
When you set position: relative, the .modal element is relative to the body because it has position: fixed. As such, the z-index value of 1000 put it in foreground.
When you use position: sticky, the .sticky element is positionned, with the default z-index value. Therefore, it positions itself in background because .overlay's z-index value of 999. .modal being a child of .sticky, it will never be able to go in front of .overlay.
You must change the structure of your HTML, or simply add a z-index on your .sticky element.
I have a page with two sections which are stacked over each other. The upper section has a background image with a fixed position to create a parallax effect. Because I had massive performance issues while scrolling I had to change the layout.
From this:
.upper-section {
height: 100vh;
background: url("./img/background.png") no-repeat fixed;
background-size: cover;
}
.lower-section {
height: 100vh;
...
}
to this:
.upper-section {
height: 100vh;
overflow: hidden; // added for pseudo-element
position: relative; // added for pseudo-element
&::before {
content: ' ';
display: block;
position: fixed; // instead of background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("./img/background.png") no-repeat fixed;
background-size: cover;
will-change: transform; // creates a new paint layer
z-index: -1;
}
}
to put the background in it's own container. My problem is that i the background image container is not inheriting the height of the upper-section container and covers the lower section too. If i change position: fixed; to position: absolute; I get the same performance issue as before. Any idea how to fix this issue?
UPDATE 1
To all future readers: I fixed my problem by setting the background of the lower section to white:
.lower-section {
height: 100vh;
background: white;
}
From your attempt and advised from #MrLister to give an answer to the question:
As commented earlier and lost in the flow of comments , you were missing a background on .lower-section to hide previous one(s).
html,
body {
margin: 0
}
.upper-section {
height: 100vh;
overflow: hidden;
position: relative;
}
.upper-section::before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("http://lorempixel.com/700/700") no-repeat fixed;
background-size: cover;
will-change: transform;
z-index: -1;
}
.lower-section {
height: 100vh;
background: white;
}
<div class="upper-section">
Upper section
</div>
<div class="lower-section">
Lower section
</div>
I am trying to find a way to put a nav bar behind some background images that repeat. Here it is:
Basically, I want to have a navigation bar behind the repeating plants image, but in front of the sun image. I am going to make the nav elements popup when they are hovered over. Here is my css for the header:
header {
height: 250px;
width: 100%;
background-image: url("top.png"), url("banner.png");
background-repeat: repeat-x, no-repeat;
background-size: auto 40px, cover;
background-position: bottom;
}
I would recommend z-index. From W3Schools:
"The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order."
The larger the z-index of an element, the closer to the front the element is.
Part of the solution was to use z-index as Howzieky mentioned but did not provide an example for. Here is how I did it:
css:
header {
height: 250px;
width: 100%;
position: relative;
}
#background-far {
height: 250px;
width: 100%;
background-image: url("banner.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#header-body {
height: 250px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#background-close {
height: 250px;
width: 100%;
background-image: url("top.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: bottom;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
html:
<header>
<div id="background-far"></div>
<div id="header-body">
<img src="logo.png"/>
</div>
<div id="background-close"></div>
</header>
I also needed split the header into 3 sections (background-far, header-body and background-close). Header body will store everything I will have in the header such as my nav bar. The important part was to make the header use position: relative and each section to use position: absolute; top: 0; left: 0;
Thanks for all your help everyone!