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?
Related
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%;
}
I have some content that is in an iFrame and a Footer that I want to be fixed, but I want the size of the footer to change based upon the user's screen size and I want the footer graphic to fill the footer. The footer has a background image that uses background-size: cover. So when the user has a wide screen, the footer should be as wide as the screen and the height should maintain the aspect ratio of the background image.
My HTML looks like this:
<div id="content">
<iframe id="xyz">
</iframe>
</div>
<div id="footer">
<div id="innerFooter">
</div>
</div>
My CSS looks like:
#content {
top: 0px;
left: 0;
position: relative;
border: 1px solid #6AA3D4;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 100%;
background-color: #fff;
bottom: 0;
position: absolute;
width: 100vw;
}
.innerFooter {
background: url("images/footerMain.png");
height: 100%;
width: 100%;
background-size: cover;
position: relative;
display: inline-block;
}
I want my footer to be at the bottom of the page and to resize appropriately (height/width) to fully fit the background graphic.
I also want my main content (iframe) to be the full height of the page to the top of the footer.
Right now my iframe is not the full height of the page.
instead of position:absolute to footer use position:fixed and height should be in pixel for footer not in %.
#footer {
width: 100%;
height: 60px; /*changed percent to pixel*/
background-color: #fff;
bottom: 0;
position: fixed; /*changed absolute to fixed*/
width: 100vw;
}
see more on CSS positioning: Here
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.
Hey guys I'm building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ ... If you can look at the css and give me a clue I would really appreciate it. Thanks!
body {
background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
margin: 0;
padding: 0;
}
.container {
margin: 0pt auto;
width: 100%;
}
#header {
background: url(http://qtsocial.com/static/images/hdr-bkg.png);
background-repeat: repeat-x;
height: 181px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
background-image: url(http://qtsocial.com/static/images/QTlogo.png);
background-repeat: no-repeat;
height: 88px;
position: absolute;
top: 40px;
left: 25px;
width: 100%;
}
#navigation{
height:40px;
z-index: -1;
}
You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you're indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you're using (299px).
Logo is too wide
Inside #logo Change width: 100%; to width: 299px; (the actual width of the image)
Your logo div is whats causing it.
It is 100% of the width, but this does not include the 25px of the left of it, thus it is overflowing 25px to the right of your window.
Change the width of the logo div to the width of your logo image, and it won't overflow to the right.