Sticky footer with resizing background image

HTML & CSS
1

Hello,

I’m working on a site that utilizes the 960 grid. At the bottom of the site there’s a div between the page content and the footer that contains an image with a 100% width, so it resizes based on browser width. You can check out a demo here: http://redone.org/_dev/ski/menu2.html

The above works fine because the content is long. However, on pages where the content is short, the image and the footer creep up to reveal undesired space between the footer and the bottom of the browser (see image below).

600×578 93.2 KB

Here’s a link to see the issue in action: http://redone.org/_dev/ski/index.html

I’d like to utilize a method similar to the one below (CSS Sticky Footer), but am having a difficult time solving this due to the resizing of the image (which is desired):
http://www.cssstickyfooter.com/

Any help would be greatly appreciated.

2

Normally a sticky footer requires the footer to be a fixed height. So would you be prepared to fix the height of the image div and just let some of the image get cut off at certain sizes? Otherwise I’s say just make the background color white instead of blue and be done with it… or dispense with the image resizing, instead keeping it fixed width and merging it into the background or framing it. (The resizing looks pretty bad in older browsers anyway.))

Here is SitePoint’s recommended sticky footer guide:

3

Hi,

I’d do something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/960.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- jQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script>
        $(document).ready(function(){
            $(".button").click(function () {
                $(this).children(".arrow").toggle();
                    return false;
            });
        });
        $(window).resize(function() {
              $('#windowreadout').html('image height = ' + $('#imgbackground > img').height() + 'px<br>footer height = ' + $('#footer').height() + 'px');
        });
    </script>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
    margin-left: 0 !important;
}
.omega {
    margin-right: 0 !important;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
 
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 10.0px;
    margin-right: 10.0px;
}
/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .grid_1 {
    width:40px;
}
.container_16 .grid_2 {
    width:100px;
}
.container_16 .grid_3 {
    width:160px;
}
.container_16 .grid_4 {
    width:220px;
}
.container_16 .grid_5 {
    width:280px;
}
.container_16 .grid_6 {
    width:340px;
}
.container_16 .grid_7 {
    width:400px;
}
.container_16 .grid_8 {
    width:460px;
}
.container_16 .grid_9 {
    width:520px;
}
.container_16 .grid_10 {
    width:580px;
}
.container_16 .grid_11 {
    width:640px;
}
.container_16 .grid_12 {
    width:700px;
}
.container_16 .grid_13 {
    width:760px;
}
.container_16 .grid_14 {
    width:820px;
}
.container_16 .grid_15 {
    width:880px;
}
.container_16 .grid_16 {
    width:940px;
}
/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_16 .prefix_1 {
    padding-left:60px;
}
.container_16 .prefix_2 {
    padding-left:120px;
}
.container_16 .prefix_3 {
    padding-left:180px;
}
.container_16 .prefix_4 {
    padding-left:240px;
}
.container_16 .prefix_5 {
    padding-left:300px;
}
.container_16 .prefix_6 {
    padding-left:360px;
}
.container_16 .prefix_7 {
    padding-left:420px;
}
.container_16 .prefix_8 {
    padding-left:480px;
}
.container_16 .prefix_9 {
    padding-left:540px;
}
.container_16 .prefix_10 {
    padding-left:600px;
}
.container_16 .prefix_11 {
    padding-left:660px;
}
.container_16 .prefix_12 {
    padding-left:720px;
}
.container_16 .prefix_13 {
    padding-left:780px;
}
.container_16 .prefix_14 {
    padding-left:840px;
}
.container_16 .prefix_15 {
    padding-left:900px;
}
/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_16 .suffix_1 {
    padding-right:60px;
}
.container_16 .suffix_2 {
    padding-right:120px;
}
.container_16 .suffix_3 {
    padding-right:180px;
}
.container_16 .suffix_4 {
    padding-right:240px;
}
.container_16 .suffix_5 {
    padding-right:300px;
}
.container_16 .suffix_6 {
    padding-right:360px;
}
.container_16 .suffix_7 {
    padding-right:420px;
}
.container_16 .suffix_8 {
    padding-right:480px;
}
.container_16 .suffix_9 {
    padding-right:540px;
}
.container_16 .suffix_10 {
    padding-right:600px;
}
.container_16 .suffix_11 {
    padding-right:660px;
}
.container_16 .suffix_12 {
    padding-right:720px;
}
.container_16 .suffix_13 {
    padding-right:780px;
}
.container_16 .suffix_14 {
    padding-right:840px;
}
.container_16 .suffix_15 {
    padding-right:900px;
}
/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_16 .push_1 {
    left:60px;
}
.container_16 .push_2 {
    left:120px;
}
.container_16 .push_3 {
    left:180px;
}
.container_16 .push_4 {
    left:240px;
}
.container_16 .push_5 {
    left:300px;
}
.container_16 .push_6 {
    left:360px;
}
.container_16 .push_7 {
    left:420px;
}
.container_16 .push_8 {
    left:480px;
}
.container_16 .push_9 {
    left:540px;
}
.container_16 .push_10 {
    left:600px;
}
.container_16 .push_11 {
    left:660px;
}
.container_16 .push_12 {
    left:720px;
}
.container_16 .push_13 {
    left:780px;
}
.container_16 .push_14 {
    left:840px;
}
.container_16 .push_15 {
    left:900px;
}
/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_16 .pull_1 {
    right:60px;
}
.container_16 .pull_2 {
    right:120px;
}
.container_16 .pull_3 {
    right:180px;
}
.container_16 .pull_4 {
    right:240px;
}
.container_16 .pull_5 {
    right:300px;
}
.container_16 .pull_6 {
    right:360px;
}
.container_16 .pull_7 {
    right:420px;
}
.container_16 .pull_8 {
    right:480px;
}
.container_16 .pull_9 {
    right:540px;
}
.container_16 .pull_10 {
    right:600px;
}
.container_16 .pull_11 {
    right:660px;
}
.container_16 .pull_12 {
    right:720px;
}
.container_16 .pull_13 {
    right:780px;
}
.container_16 .pull_14 {
    right:840px;
}
.container_16 .pull_15 {
    right:900px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
 @font-face {
 font-family: 'TradeGothic';
 src: url('fonts/tradegothicltstd-cn18-webfont.eot');
 src: local('?'), url('fonts/tradegothicltstd-cn18-webfont.woff') format('woff'), url('fonts/tradegothicltstd-cn18-webfont.ttf') format('truetype'), url('fonts/tradegothicltstd-cn18-webfont.svg#webfontvlOEDMF8') format('svg');
 font-weight: normal;
 font-style: normal;
}
body, p {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
}
body {
    background-color: #014783;
}
p {
    padding-bottom: 18px;
}
a, a:hover, a:link, a:hover:visited {
    color: #89cefa;
    text-decoration: underline;
}
a:hover, a:hover:visited {
    text-decoration: none;
}
/******************************************************
header 
******************************************************/
#header {
    overflow:auto;
}
/******************************************************
headerline 
******************************************************/
#headerline {
    overflow:auto;
    border-bottom: 1px solid #2c5e93;
}
/******************************************************
menu-main-menu 
******************************************************/
#menu-main-menu ul {
    list-style: none;
    float: left;
}
#menu-main-menu li {
    padding: 0;
    display:block;
    float: left;
    text-transform:uppercase;
}
#menu-main-menu li a {
    padding: 12px 12px 8px 12px;
    display:block;
    color: #89cefa;
    text-decoration: none;
    font-family: "TradeGothic", sans-serif;
    font-size: 14px;
}
#menu-main-menu li a:hover, #menu-main-menu li a:hover:visited {
    color: #fff;
    background-color: #89cefa;
}
#menu-main-menu li.current_page_item, #menu-main-menu li.current_page_item a, #menu-main-menu li.current-category-ancestor a, #menu-main-menu li.current-post-parent a, #menu-main-menu li.current-menu-item a, #menu-main-menu li.current-menu-parent a {
    color: #fff;
    background-color: #89cefa;
    background-image:url(http://redone.org/_dev/ski/img/nav_tick.png);
}
/******************************************************
search 
******************************************************/
#search p {
    padding: 12px 0 8px 0;
    text-align: right;
    text-transform:uppercase;
}
#search a {
    color: #89cefa;
    text-decoration: none;
    font-family: "TradeGothic", sans-serif;
    font-size: 13px;
}
/******************************************************
logo
******************************************************/
#logo {
    height: 96px;
}
/******************************************************
pagetitle 
******************************************************/
#pagetitle {
    height: 96px;
    display: table-cell;
    vertical-align: middle;
}
#pagetitle h2 {
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-size: 24px;
    font-weight: normal;
    color: #800;
    padding: 32px 0 0 0;
}
/******************************************************
menu-sub-menu
******************************************************/
#menu-sub-menu {
    border-top: 1px solid #2c5e93;
}
#menu-sub-menu ul {
    list-style: none;
}
#menu-sub-menu li {
    padding: 0;
    display:block;
    border-bottom: 1px solid #2c5e93;
}
#menu-sub-menu li a {
    padding: 6px 0 2px 1px;
    display:block;
    color: #89cefa;
    text-decoration: none;
    font-family: "TradeGothic", sans-serif;
    font-size: 14px;
}
#menu-sub-menu li a:hover {
    color: #fff;
}
#menu-sub-menu li.current_page_item, #menu-sub-menu li.current_page_item a, #menu-sub-menu li.current-category-ancestor a, #menu-sub-menu li.current-post-parent a, #menu-sub-menu li.current-menu-item a, #menu-sub-menu li.current-menu-parent a {
    color: #fff;
}
/******************************************************
definition
******************************************************/
#definition {
    padding: 10px 0 20px 0;
    border-top: 1px solid #2c5e93;
}
#definition p {
    font-size: 14px;
    line-height: 1.5;
    padding: 0 20px 30px 0;
    color: #fff;
}
#definition p.defined {
    font-size: 18px;
    line-height: 1.4;
    padding: 0 20px 20px 0;
    color: #89cefa;
}
#definition p.example {
    font-size: 10px;
    padding: 0 20px 0 0;
    color: #89cefa;
}
#definition p.padthis {
    padding-right: 130px;
}
/******************************************************
content
******************************************************/
#content, #definition {
    padding: 10px 0 20px 0;
    border-top: 1px solid #2c5e93;
}
#content p {
    line-height: 1.8;
    padding: 0 20px 20px 0;
}
#content h3 {
    border-top: 1px solid #2c5e93;
    padding: 10px 0;
    font-family: "TradeGothic", sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #800;
    text-transform:uppercase;
}
#content p.sharethis {
    border-top: 1px solid #2c5e93;
    padding: 16px 0 0 0;
}
/******************************************************
sidebar
******************************************************/
#sidebar {
    padding-top: 10px;
    border-top: 1px solid #2c5e93;
}
#sidebar h3 {
    border-top: 1px solid #2c5e93;
    padding: 0 0 6px 0;
    font-family: "TradeGothic", sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #89cefa;
    text-transform:uppercase;
}
#sidebar h3.top {
    border-top: none;
}
#sidebar p {
    line-height: 1.6;
    padding: 0 20px 10px 0;
    font-size: 11px;
}
/******************************************************
imgbackground
******************************************************/
#imgbackground {
    background-color: #045193;
    position:absolute;
    left:0;
    bottom:0;
}
/******************************************************
footer
******************************************************/
#footer {
    padding: 0;
    margin: 0;
    background-color:#fff;
    width: 100%;
    min-width: 960px;
    position:relative;
    z-index:1;
}
.footerleft {
    background-color:#fff;
    width: 70%;
    float:left;
}
.footerleft p {
    color: #4670a0;
    font-size: 10px;
    padding: 12px 10px 8px 16px;
}
.footerright {
    background-color:#fff;
    width: 30%;
    float:left;
}
.footerright p {
    color: #4670a0;
    font-size: 10px;
   [B] padding: 10px 16px 0px 16px;[/B]
    text-align:right;
    margin:0;
}

[B]
/* sticky footer code */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
#imgbackground {
    background-color: #045193;
    position:absolute;
    left:0;
    bottom:38px;
}
#footer {
    background-color:#fff;
    min-width: 960px;
    position:relative;
    z-index:1;
    height:38px;
}
html,body{margin:0;padding:0;height:100%}
#outer{
    min-height:100%;
    z-index:2;
    position:relative;
    margin-top:-38px;
}
* html #outer{height:100%}
#outer{margin-top:-38px}
#header{border-top:38px solid #014783;overflow:hidden}[/B]

</style>
</head>
<body>
[B]<div id="outer">[/B]
    <!-- Main Navigation -->
    <div id="header" class="container_16">
        <!-- extra div to eliminate padding issue -->
        <div id="headerline" class="grid_16">
            <!-- Main Nav -->
            <div id="menu-main-menu" class="grid_14 alpha">
                <ul>
                    <li class="current_page_item"><a href="index.html">Menu 1</a></li>
                    <li><a href="menu2.html">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                    <li><a href="#">Menu 4</a></li>
                    <li><a href="#">Menu 5</a></li>
                    <li><a href="#">Menu 6</a></li>
                </ul>
            </div>
            <!-- Search -->
            <div id="search" class="grid_2 omega">
                <p><a href="#">Search</a></p>
            </div>
        </div>
    </div>
    <!-- Logo | Page Title -->
    <div id="subheader" class="container_16">
        <!-- Logo -->
        <div id="logo" class="grid_3"> <img src="http://redone.org/_dev/ski/img/logo.png" alt="logo" /> </div>
        <!-- Page title -->
        <div id="pagetitle" class="grid_13"> </div>
    </div>
    <!-- Main Content Area -->
    <div id="main" class="container_16">
        <!-- Sub Nav -->
        <div id="menu-sub-menu" class="grid_3">
            <ul>
                <li class="current_page_item"><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
            </ul>
        </div>
        <!-- Content -->
        <div id="definition" class="grid_13">
            <p class="defined padthis">Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
            <p id="windowreadout">PLEASE RESIZE WINDOW</p>
        </div>
    </div>
    <div class="clear"></div>
[B]</div>[/B]
<!-- Footer-->
<div id="footer" class="container_16">
    <!-- Background Image -->
   [B] <div id="imgbackground"><img src="http://redone.org/_dev/ski/img/backgrounds/background_skier.jpg" alt="skiing" width="100%" /></div>[/B]
    <!-- Footer bar -->
    <div class="footerleft">
        <p>&copy; 2010 Company  |  Site Map  |  Contact Us</p>
    </div>
    <div class="footerright">
        <p>Join us: <img src="http://redone.org/_dev/ski/img/icons/icon_twitter.png" alt="Follow Us on Twitter" /> <img src="http://redone.org/_dev/ski/img/icons/icon_linkedin.png" alt="LinkedIn" /> <img src="http://redone.org/_dev/ski/img/icons/icon_facebook.png" alt="Friend us on Facebook" /></p>
    </div>
</div>
</body>
</html>

The skier image is removed from the flow but attached to the footer and can slide under the content rather than being in the flow and creating a large gap at all times.

The sticky footer code is the same as shown in the faq.

4

Thanks for the reply Paul.

I uploaded your code to test it out and it appears the skier image is not showing up. Any ideas what might have caused the image to disappear?
http://redone.org/_dev/ski/bottom_tester.html

I’ve been going over the code and can’t find anything. Then again, I’m looking with tired eyes.

5

I posted some screensnaps from firebug to show you how the divs are appearing.
http://redone.org/_dev/ski/sticky.html

I’m assuming there’s an issue with the #outer css, as it appears to be covering up the image.

6

You’ve got some extra CSS in there that Paul didn’t have. At around line 284 of your style sheet you have

#footer {
  overflow: auto;
}

which you need to remove. :slight_smile:

7

Yes Ralph has correctly spotted the problem :slight_smile:

The overflow you set would stop the skier image from being visible outside the footer.