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>
Related
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'm trying to get these two objects fixed on the users screen. Please note that I can only modify this with using CSS so the HTML can't be edited!, this is a CSS zen garden example (based on the '90s) I'm trying (which means in short you make a design based on a fixed html file so you can 'show off' what CSS is capable off.)
You can find a live example here.
http://lucasdebelder.be/zengarden/index.html
I got the top fixed and working with the following syntax.
body::before {
content: '';
position: fixed;
width: 100%;
height: 12.5%;
background: url(header_browser.svg);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
I then tried the ::after statement on the body. But that doesn't work how can I get the bottom image (footer) sticked to the bottom?
body::after {
content: '';
position: fixed;
width: 100%;
height: 12.5%;
background: url(footer_browser.svg);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
Tell your ::before pseudo element to go up the top at 0.
Tell your ::after pseudo element to go down the bottom at 0.
body::before {
content: '';
position: fixed;
top: 0;
width: 100%;
height: 12.5%;
background: #0f0;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
body::after {
content: '';
position: fixed;
bottom: 0;
width: 100%;
height: 12.5%;
background: #f00;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
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>
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!