I added code to my css so my background would stop stretching, when content is on the page. However now my content is being cut off, and I think its because the footer is not staying at the bottom of the page. Its visible if the page loads a little slow, but once the content loads you can't see the footer anymore. Nor can you scroll down without changing the height. I've tried plugins, and additional code suggested on other post. None have helped. Is there a way I can keep my footer at the bottom, while keeping the code that keeps my background from stretching? edit I'm sorry left out the code that used to stop the stretching. It can be seen below. Also, an example of what is happening can be seen here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.. The social icons in the footer is there, but its loading behind the content, and in the middle of the page. It appears that is why my content is being cut off.
I'm not sure I entirely understand your question... but I think the issue with your CSS is the height: 100%;. Adding 100% height makes it 100% height of the screen - and because it doesn't start at the top of the page it extends down below the bottom of the visible area. If you add the CSS top: 0; then you'll see what I mean - it no longer goes below the bottom of the screen, however it now overlaps the header. To get around this, you can change the CSS to:
position: absolute;
left: 0;
height: calc(100% - 54px); /*Minus the height of the header*/
top: 54px; /*The height of the header*/
background-size: cover;
background-attachment: fixed;
I hope this helps, if not please explain the issue in more detail and I'll see if I can help!
After a few days of troubleshooting and searching the web, I found a solution for my problem. I added code to put the footer at the bottom of the page. The code left the footer stickied, instead of at the bottom of all the content. It also didn't change the cutting off of my content. So I knew it wasn't the footer.
The way I wanted the footer to be at the bottom of the content. So a fixed footer isn't what I needed, but I found out a pushing footer would do the trick. Apparently, when the its not a lot of content on the page, sometimes the footer will push up to where the content stops. So my next step was to find out exactly what was cutting the conter off.
It the container that was cutting off in the middle of the layout. #primary in the code the make background stop stretching was the wrong selector, so I changed it to body. I also added a code to make the height and width of the container 100%. Then BOOM it worked. Below is all the additional css I used to fixed the problem. Thank you to everybody who helped me.
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}
Related
On some of the pages of the website I am creating, due to lack of content, the footer does not stick to the bottom and there's an unwanted white space below it.
Googling the issue, I've found different solutions like this one. So I figured min-height: 100vh is the ultimate solution. The problem is when I use that property for the main page container, it adds white space below the content to get the footer stick to the bottom which is again undesirable:
It seems to me that it just place the white space elsewhere (in the middle of the page instead of at the bottom of the page). Is there a neater solution for keeping the footer at the bottom?
I think you need to following to your footer...
#bottom-footer {
position: fixed;
bottom: 0;
width: 100%;
}
Thanks
I am working on a website and have tried to stick the footer to the bottom, since many pages will not be long enough to push the footer to the bottom.
I have applied this technique: http://mystrd.at/modern-clean-css-sticky-footer/
My page can be viewed here: https://jsfiddle.net/cgLf0oLa/
I believe that this CSS input is very important:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px;
}
However, I am experiencing trouble. The footer is being rendered on top of the other content, and I have no clue how to make it adjust to the content size.
Help is much appreciated.
Kind regards,
Clemens
Try adding an :after with height equal the height of the footer to the wrapper above the footer. It leaves blank area below the footer, which pushes the footer to the bottom.
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.