I have been trying to fix this issue for days. I see a lot questions about it, but none of the solutions seem to be working for me.
I have a website that has a Bootstrap 3 front end. I want a sticky bottom footer and I'm using Bootstrap's navbar navbar-fixed-bottom styles to achieve this. It is working, but the problem is that the content will overlap with the footer when there is not enough room. I want to be able to scroll the content with the footer and header fixed and I don't want the footer to scroll with the content.
Here is the site. You can resize the height of your browser to see what I'm talking about.
Any help would be appreciated!
Icemanind, What I did here to help your issue was this.
I added height to the body.
I set the background image not using the bodytag and fixed it.
This way it now scrolls and the menu and footer stays fixed.
I also made the background image no repeat.
Is this what you were wanting.
Here is the Fiddle.
The css link to your custom css didn't want to play ball in the fiddle, but in a mock up works fine.
<style>
body{
height:2000px;
}
.bg-image {
position: fixed;
width: 100%;
height:100vh;
background: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -100;
}
</style>
Updated.
Made a change to the Fiddle, I have added a transparent area to act as some content that is 2000px height.
I have added some margin to the bottom of this content.
Have a look now and see if that is what you are after here.
Here is a full size Fiddle.
Related
my first post here.
Something on my own website is bothering me for a really long time. The thing is that when I'm visiting my website on my Android phone and scroll through the page, the background image keeps 'adjusting', so there is a stutterlike event continiously occuring when scrolling through the website. You can visit it here: http://www.bramvalstar.nl
The background class:
.achtergrond {
position: relative;
width: auto;
height: 95%;
background: url(media/images/xxx.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
Thanks in advance.
Yeah, that is the affect of using relative page height. You see, when the page loads, the available viewport height is slightly less than 100% as the address bar occupies some space on top. When you scroll down, the address bar disappears and the viewport height jumps back to 100%, thus your page re-adjusts to the new available height. Unfortunately, there is no way to fix this in css. You can either use a fixed height not a relative one, or set the height using javascript at load time.
hope this is what you are looking for
.achtergrond {background-attachment:fixed;}
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
So I have tried to get rid of this white space to the right of my website for ages now. I've tried all the overflow-x: hidden rules but none of them seem to work.
I have ruled it down to when I remove:
(div id="content5" style="position:absolute;")
(img style="width:175px; height:175px;" src="Images/Graphic.jpg")
(/div)
from the html file then the white space goes away. How do I put the picture on my web page without getting the white space? Don't worry I am using angle brackets for my html.
You can view my website here.
CSS:
view code here
HTML:
view code here
Make the width of the #content5 element set to the pixel width of the image:
#content5 {
width:175px;
}
Right now, the width is set to 50%. But that essentially sets it to 50% of the width of the parent element, which is the whole page. If you look in the inspector, the divs containing all of your images are much larger than they need to be because of this.
EDIT: Included inspector image of Chrome session
#Daniel Ravens if you insert the following code it should fix your problem:
html {
background: url(Images/FrontCover.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code basically stretches everything on the page to make it fit I got this code from the following site:
CSS Tricks
I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.
So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.
As you can see, the background image that I am putting around the <header></header> tags is not stretching the full height of the div.
Here is a link to my CSS file (everything else is just stock Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css
Here is also the CSS code that I am using for that particular section of the site:
header {
background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have done these full-width cover backgrounds with CSS3 a million times, but I have absolutely no idea why this time the image won't cover the entirety of that div.
Hopefully it's just a super simple fix. I would really appreciate any and all help.
Your issue is because of the lack of appropriate cropping of your background image.
Try this with your header tag:
header { background: black;}
You'll see that the background takes up the appropriate dimensions of the div. The reason white space is showing is because your background image has a lot of extra transparent space around the image. So the background is repeating appropriately, you just need to crop it so it will show the part of image you want.
Still dont belive me?
Try replacing it with this:
header { background: url("http://placekitten.com/1800/950");}