I am beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
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;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
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;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.
Related
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
I have this vertically formed image that should reach to the bottom of the page. So basically its height should be 100% all the time. Then this same image should also be put at the center of the page, which is pretty simple to do, but what I'm struggling with is making a menu in the middle of the image (inside it).
What are the best ways to achieve that effect? I cannot provide any code try because I don't even know how to start. Help would be highly appreciated.
This is to demonstrate the problem:
Demo
html
<div class="menuOnImage">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
css
.menuOnImage {
background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
text-align: center;
width: 80%;
left:0;
right: 0;
margin: auto;
height: 100%;
}
ul {
display: inline-block;
position: absolute;
top:0;
bottom:0;
height: 110px;
left:0;
right: 0;
margin: auto;
width: 60%;
border: 5px solid #fff;
list-style: none;
padding:0;
border-radius: 5px;
padding: 5px;
background: rgba(0,0,0,0.4);
}
li {
border: 2px solid #aaa;
margin: 2px;
background: rgba(0,0,0,0.4);
color: #fff;
}
body, html {
height: 100%;
margin:0;
padding:0;
}
HTML:
<div id="largeImage">
<div id="menu">Menu Here</div>
</div>
CSS:
html, body { width: 100%; height: 100%; }
#largeImage {
background: url('path/to/image.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
#menu {
width: 500px;
margin: 0 auto;
}
This should give you the basis of what to do :) Basically the code above is to create a div that is 100% width and height, and then position a menu that is 500px in the middle of that div
I'm trying to make the section to be centred to the screen. The header is fixed and header-container is fixed as well. Header-container contains the logo, nav and social links.
Saying the header and header-container are using top:0;, I can't seem to get my head around to getting it to work. I know by using margin: 0 auto; would centre it, but not in this case.
Edit: Whenever I seem to centre it, when I zoom out it shoots to the left side, The header seems to stay centred, which is the result that I'm looking for.
HTML:
<header>
<div id="header-container">
<nav></nav>
<div id="social"></div>
</div>
</header>
<section></section>
CSS:
body {
font-family: 'Open Sans', sans-serif;
text-align: center;
position: relative;
margin: 0 auto;
background: #ccc;
}
#wrapper {
width: 1048px;
min-height: 800px;
text-align: left;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 86px;
text-align: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top:0;
background-image: url("../images/header-banner.png");
border-bottom: 2px solid #5d5d5d;
}
div#header-container {
width: 1048px;
height: 86px;
position: relative;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border: 1px solid green;
}
section {
width: 1048px;
min-height: 500px;
background:#fff;
margin:86px auto 0;
z-index: -1;
position: relative;
}
If your width is 100% of it's container, margin: 0 auto; will not work in most browsers. Change it to 98% and it will correctly auto center. This will also happen if the width is set by pixels or any other measurement type.
EDIT:
Okay, let me simplify this because I'm obviously explaining it horrendously.
Here is a fiddle: http://jsfiddle.net/ZaSM3/2/
And here is the code:
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#coverPhoto {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(http://i.imgur.com/of5DkaT.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
.footer {
height: 4em;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="coverPhoto">
<div class="wrapper">
<p>This is my content.</p>
<div class="push"></div>
</div>
</div>
<div class="footer">
<p>Footer is NOT overlayed over the image</p>
</div>
</body>
Please note that the footer is at the bottom of the page, solving the problem, but it is NOT overlayed over the cover photo. I need it to be appear over the cover photo.
I don't agree with being marked down when i did answer based upon the limited information provided.
However, the link you posted me to seemed to work fine. But there is a cleaner solution with less markup you could consider.
http://jsfiddle.net/ZaSM3/3/
HTML:
<div class="page-wrap">
<div id="content">
<p>This is my content.</p>
</div>
</div>
<div class="site-footer">
<p>Footer IS overlayed over the image</p>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html{
background: url(http://i.imgur.com/fJYziTr.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: Tahoma, Geneva, Arial;
font-size: 14px;
}
#content {
width: 1000px;
height: 500px;
margin: auto;
background-color: #000;
background-color: rgba(0,0,0,0.75);
color: #FFF;
text-align: justify;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
z-index: 999;
height: 142px;
}
I suggest using the footer tag (). This is part of the new HTML5 specification and is much clearer.
HTML:
<footer><!--Insert whatever you need here--></footer>
CSS:
footer {
position:fixed;
bottom:0;
opacity:0.5;
}
You can change the opacity to your needs. 1 is 100% and 0.5 50%. Tht'll give you an idea. Hope it helped.
I am making a page whose layout is divided into 3 sections : Header, main body, and footer. I want a background image in my main body. Now when i try to do that, i am experiencing a problem. The image is not covering the complete area. It leaves some area at the bottom. Check this fiddle for proper explanation.
Here is what i have done so far:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
Also please help me to make this responsive design.
You need to force a height to the body and html tag of 100%. If there is no content the background won't appear because the height of the element (.mainbodycontainer) is 0. In your case it was 80px because you applied padding.
check this fiddle. http://jsfiddle.net/olwez/ncLZN/
I added a height to the body and html tags of 100% and a minimum height of 100% to the .mainbodycontainer div. That way you don't have to manually set the heights or have content within the .mainbodycontainer for the image to behave as you wish.
I just threw in an overflow: hidden; on the body tag so that scrolling is gone.
Here is the full css.
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
add this to your style:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
A background image will only show as much is revealed either by the content or a height. If your div doesn't have enough content to force the parent element big enough, you won't see it all. Also, if you are using any type of positioning like fixed, absolute or even relative and moving it, that can affect it also. I didn't look at the fiddle but those are some common issues.