Keeping footer at bottom of page and overlayed on a cover photo

Question

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.

Hey, could we see all of your css that you are currently trying to use? Even better than this, would be a jsfiddle! — Gerico, Dec 18 '13 at 20:13
possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) — kumarharsh, Dec 18 '13 at 20:14
@Kumar Did you read my full questiomn? I linked a solution like that in the question and mentioned the additional layer of complication with the cover photo. — aadu, Dec 18 '13 at 20:22
In order for us to see the complication we need more of your code, i.e. the css your using on that html, in order to see any problems. — Gerico, Dec 18 '13 at 20:23
I have made an edit with the CSS I am currently using, which works, except if the content stretches down the page, the footer will be oerlayed over the content. — aadu, Dec 18 '13 at 20:32
@AzzyDude: If you want the footer to always be at the bottom, use `position: fixed; bottom: 0` on the footer, and `padding-bottom: ` on the content. — kumarharsh, Dec 18 '13 at 20:58

Gerico · Accepted Answer · 2013-12-18T21:22:32.293

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;
}

Is it possible to do this by putting the cover photo on a
instead of ? I need to do it with a div as I have a different cover photo on every page of the site. — aadu, Dec 18 '13 at 21:39
You could apply an id to the html element that's unique for each page — Gerico, Dec 18 '13 at 21:56

score 0 · Answer 2 · answered Dec 18 '13 at 20:34

0

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.

answered Dec 18 '13 at 20:34

user2867973

49
6

Hi, thanks, that does work, however if the content stretches past the bottom of the page, the footer appears over the content. – aadu Dec 18 '13 at 20:38
Could you show me the link to this I'm not getting it. You can us jsfiddle.net to show us. If you post it I will try and help you, thanks. – user2867973 Dec 18 '13 at 20:59
put the footer in the cover photo div and it will be placed over it (as long as you also use my css). – user2867973 Dec 18 '13 at 22:12

Keeping footer at bottom of page and overlayed on a cover photo

2 Answers2