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?
Related
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
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 set a background image that will be dimmed with white text overlay. However, the background image is not showing up.
When I inspect the page in Chrome, there is an error shown at background-image.
/*HTML*/
<div class="main-body1">
<h1>Innovating Moldova. Thinking bigger.</h1>
<h2>A nonprofit collaboration between professionals and
organizations focused on benefitting the economic state of the
Republic of Moldova.</h2>
</div>
/*CSS*/
.main-body1 {
padding: 10rem 5%;
position: relative;
height: 500px;
width: 100%;}
.main-body1:after {
content: "";
position: absolute;
background-image: url("../images/chisinau.jpeg") no-repeat;
height: 500px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1; /*Make sure the image sits below the content */}
no-repeat is a valid value for the background-repeat property, but not for the background-image property.
It can also be used in the shorthand property background. So to fix your problem, either go
background-image: url("../images/chisinau.jpeg");
background-repeat: no-repeat;
or use the shorthand property background:
background: url("../images/chisinau.jpeg") no-repeat;
try this, i just removed no-repeat and add background repeat as separate background-repeat: no-repeat;
.main-body1 {
padding: 10rem 5%;
position: relative;
height: 500px;
width: 100%;}
.main-body1:after {
content: "";
position: absolute;
background-image: url("https://images3.alphacoders.com/117/117169.jpg");
background-repeat: no-repeat;
height: 500px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
<div class="main-body1">
<h1>Innovating Moldova. Thinking bigger.</h1>
<h2>A nonprofit collaboration between professionals and
organizations focused on benefitting the economic state of the
Republic of Moldova.</h2>
</div>
Why is my background-image inside the pseudo element ::before not showing up? I also tested of replacing the background-image with a background-color and it still doesn't work. This is in SASS format in case some would be wondering of the nested ::before.
.logoframe{
float: left;
height: 817px;
width: 20%;
position: relative;
left: -6%;
transform: skewX(-11deg);
border: 1px solid #e26f6f;
&::before{
content: "";
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
position: relative;
height: 817px;
width: 150px;
}
}
<div class="logoframe"></div>
the "display" property. display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline . A block element is often called a block-level element.
&::before{
content: "";
display: block;/*missing prop*/
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
position: relative;
height: 817px;
width: 150px;
}
Sometimes you need to add background-size property too with display: block.
&::before{
content: "";
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
background-size:100%;
position: relative;
height: 817px;
width: 150px;
display:block;
}
You should update below css part. if you need background image in center please update background-position.
.logoframe{
float: left;
height: 817px;
width: 20%;
position: relative;
left: 0;
transform: skewX(-11deg);
border: 1px solid #e26f6f;
}
.logoframe:before {
content: "";
background: url('https://n2.sdlcdn.com/imgs/a/a/1/Chromozome_Yamaha_102025_m_1_2x-4ab77.jpg') 0 0 no-repeat;/* replace 0 0 to center center */
background-repeat: no-repeat;
position: absolute;
background-size:contain;
top:0;
left:0;
height: 817px;
width: 100%;
}
<div class="logoframe"></div>
I don't know if this helps but sometimes if you are using the shortcuts for the background property it might not work, but if you use the properties differently I think it might work. I am saying this from experience.
.showcase::before {
content: '';
background-image: url(../images/Desert.jpg) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
But this one did.
.showcase::before {
content: '';
background-image: url(../images/Desert.jpg);
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
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!