I have a hero image with layers and a parallax effect on a couple of the layers as the user scrolls down, and I want the image to be hidden below my navbar, but currently the image is viewable behind all of my content when I just need it for the top portion of the page. I have tried using z-index but to no avail. Currently, this is what it looks like current view :
but I need the image to cut off after the nav and display the background color of the page. Here's my relevant css
#hero {
height: 1000px;
overflow: hidden;
position: relative;
}
/* styling repeating layer of classes */
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
body, html {
height: 100%;
margin: 0;
}
/*Navbar styling */
#navbar {
overflow: hidden;
background-color: #130D0A;
z-index: 9;
text-align:center;
}
/* sticking nav to top of page */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
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
My website is https://www.pisqueya.com
I have a big background image full width always visible at the bottom of all pages, it's working fine on desktop but not on mobile device.
Anyone know what I'm missing with my code below to fix that please?
body {
font-family: portuguesa;
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed;
background-size: contain;
height: 100%;
overflow: hidden;
background-color: #fdeae1;
}
#wrapper,
#main {
background-color: initial!Important;
}
It looks fine for me.
The thing is when you are in a smaller screen the picture is getting small too.
If you want to use the same picture you should change the value of background-size for mobile devices or use a different picture for them.
Hope it can be usefull too.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Best regards.
You can use CSS media queries for mobile device. Add media query CSS for mobile device size and put your CSS Code in it. Following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
}
Change Your CSS
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
/*Add This CSS*/
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
header {
width: 100%;
min-height: 100vh;
color: black;
background-image: url('../../files/header-image.jpg');
background-size: 100%;
position: relative;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
height: 60px;
overflow: hidden;
font-family: $base-font;
}
I set cover image for header, height 100vh. Navbar is inside header but fixed position. When i click on some of the navbar links it leads to other sections on the page (it is one page website), and when i scroll back my cover image got shorter for 60px (height of navbar). Why is this happening?
I have a single div that's 100% of the width and height of the page.
I've set the background of the div to an animated gif and made the height of the background change with the div's height (which is 100% the height of the page). The background image repeats horizontally and is positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full-screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray, horizontal thin line appears on top of the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When I make the browser's (Google Chrome) height very short, the line disappears. This problem doesn't occur on Safari.
As can be seen in the screenshot above, the repeating background image is positioned at the bottom. There is are no vertical liens between every repeated image but there is one horizontal line that goes across all of them. I've checked the image and the line is not there, it is produced by the browser. How do I get rid of this line? I've looked at other posts on this but none of the fixes work.
Here's the background image:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead of
background-size: auto 65%;
#media workaround
This bug only appears to occur with larger viewport heights. Luckily it is not as critical to scale the image down after a certain height. With that in mind we can use #media queries to apply the background-size scaling only when the viewports height is under a certain size:
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working Example
As a jsBin as well
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>
My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.