I'm using a background image which should cover the hole body area. Furthermore I want a sticky footer at the bottom. Now my main problem is that the background-image stops after the 100% of the body-element (after scrolling). But the background-image should cover the hole area - I could say it should have the width of the body (not just of the content which has not the hole width and is centered) and the height of the content which may be more than 100% of the browser height.
I tried the following code:
HTML
<body>
<div id="backgroundWrapper">
<div id="wrapper">
<header>
...
</header>
<article>
...
</article>
<footer>
...
</footer>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
}
div#backgroundWrapper {
min-height: 100%;
background: url('/images/bodyBackground.jpg') no-repeat;
background-position: center;
background-size: cover;
}
div#backgroundWrapper > div#wrapper {
position: relative;
width: 1024px;
min-height: 100%;
margin: 0 auto;
}
div#wrapper > footer {
position: absolute;
width: 100%;
height: 115px;
bottom: 0;
}
Although I gave min-height: 100% to the background wrapper, the inner wrapper which also has min-height: 100% doesn't fit the height (because its positioning is relative), so the sticky footer is not at the window bottom if the content is small.
Can you help me?
Here is the JSFiddle: http://jsfiddle.net/bfd2d/
EDIT: It is possible if I move the footer after the inner wrapper so that it's a direct child of the background wrapper but it would be nice if the footer is child of the inner wrapper because I haven't to give it the wrapper with and center it again.
Related
I have a sticky footer that sticks to the bottom, but the problem is the contents in the body and the footer overlap.
I currently have my html, body, and main set to height 100% / min-height: 100%, but and my footer is positioned absolute with left: 0 and bottom: 0. The problem with this is, I have my background image positioned at the bottom of my main and it overlaps onto the positioned absolute footer.
I also tried not having my footer positioned absolute and just have the main height 100%, and this works fine, but I have to scroll down to see the footer. Why is the footer being pushed down so much that I need to scroll down? I want the footer to be exactly at the bottom of the page without having to scroll down to see it.
<html>
<body>
<main>
<div>Contents here</div>
</main>
<footer/>
</body>
</html>
html, body, main {
height: 100%;
}
.content {
background-repeat: no-repeat;
background-position-y: 100%;
background-position-x: center;
background-size: 1000px;
}
This is sticky footer code that works. You might want to use this layout to solve your issue.
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<p><button id="add">Add Content</button></p>
<div class="push"></div>
</div>
<footer class="footer">
Footer
</footer>
I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.
.test img{
width: 100%;
max-width: 100%;
height: 100vh;
padding: 10px;
}
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
height: 100vh;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: center center;
}
<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>
<div class="main">
<div class="wrapper"></div>
</div>
https://jsfiddle.net/u9t4hqqq/
You can use margin, you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()
body {margin:0;}
div {
margin: 10px;
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: calc(100vh - 20px);
}
<div></div>
Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.
body {margin:0;}
section {
height: 100vh;
box-sizing: border-box;
padding: 10px;
}
div {
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: 100%;
}
<section><div></div></section>
Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main. Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.
If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.
Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.
To achieve something like it, look at the following:
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
background-size: cover;
background-position: center center;
height: auto;
min-height: 100vh;
color: #fff;
box-sizing: border-box;
/* Give your content padding so nothing gets hidden under the frame */
padding: 2em;
}
.frame {
position: fixed;
z-index: 9999;
background-color: yellow;
}
.top, .bottom {
width: 100%;
height: 10px;
left: 0;
}
.left, .right {
width: 10px;
height: 100vh;
top: 0;
}
.top {
top: 0;
}
.right {
right: 0;
left: auto;
}
.bottom {
bottom: 0;
top: auto;
}
.left {
left: 0;
}
<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>
<div class="wrapper">
<h1>Headline</h1>
<p>Your content here.</p>
</div>
I'm trying to use a <img> tag to show a photo over another div, as some sort of overlay. However, the image won't scale to be inside of it's parent div (which is the body of the page). Instead it overflows the body. When I set overflow: hidden; to the body, you can't scroll over the page. I want the image to be full-height and fitted within the body (without enlarging the body).
This is basically the structure of the page:
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>
And the css:
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}
This is basically what is happening now:
The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
height in % will not work till you will use meta for height,
ok please use overflow:hidden at the place of overflow:none
make your image as background-image. I think it would be better.
Add a container in your body as shown,
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>
and do this in css
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}
The .container is responsible for setting a boundary and by using overflow: hidden, prevent content inside .container to overlap. While in the case of .imgContainer make sure the position is relative to container, absolute will pull itself out the flow, which is not safe in your case.
How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<footer></footer>
</div>
</body>
So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.
Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.
Example on JSFiddle
Code
<style type="text/css">
html, body { height: 100%; }
#container { position: relative;
/* updated to support footer push */
min-height: 100%;
padding-bottom: 60px; /* must be the same as footer height */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#below { height: 500px; } /* or no height, or whatever */
footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>
<div id="container">
<footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>
Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.
(For history's sake, here is the original fiddle)
footer { position : absolute; bottom : 0px; }
position : fixed ( When you want to stick any html element on screen and that will not move during scrolling )
position : absolute ( When it will show, it will be on the position that you specified, but later screen size and scrolling can change it's position )
Thanks ( Sorry for weak english )
:)
you could add some padding to the bottom of your page, and then use vh measurements:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#header{
height:10vh;
}
#container {
background: red;
position:relative;
}
#body {
height: 70vh;
background: gray;
padding-bottom:20vh;
}
footer {
position: absolute;
bottom: 0;
height: 20vh;
width: 100%;
background: blue;
}
<body>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<footer>footer</footer>
</div>
</body>
Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.
Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But my footer appears way below and creates a huge gap in between.
Website: Stingrayimages.ca
Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink the window, the footer doesnt stop where the content.
Also i cant get the content div to stay in the middle without messing everything up.
Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.
In the sticky footer, remember, the container wraps all body content but the footer.
If you are using the same technique as the link, you are missing position at the footer.
And still, with the example you linked, see the structure:
<style type="text/css">
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
But i would rather go with something like this:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%; /* IE6: min-height*/
min-height: 100%;
}
div#header {
}
div#content {
padding: 1em 1em 5em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
}
</style>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>