Question

I’m using this tutorial to create a full screen background. (UPDATE: Using height and width at 100% for the image is not what I want as that just stretches an image, this script keeps the aspect ratio.)

I’m also trying to incorporate a sticky footer using this tutorial.

Adding the sticky footer part is creating some extra horizontal scrolling on the background image.

My image is 700px x 466px and my browser window is 1240 x 1414. My website sits in the middle of the browser window horizontally but there’s an extra bit of scrolling that can be done to the right.

How can I get the full screen background image working with the sticky footer so that it removes the extra horizontal scrolling? The sticky footer needs to sit on top of the background image not below it.

UPDATE: Using Supr’s answer to solve the horizontal problem, the only thing left to solve is that the footer sits below the background image rather than on top of it.

This is my css:

* {
    margin:0;
    }

html, body {
    height:100%;
    }

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }

.footer, .push {
    height: 4em;
    }   

.clear {
    clear:both;
    }

body {
    font-size: 62.5%; /* Resets 1em to 10px */
    background-repeat:repeat-x;
    background-image: url('images/background-repeat.jpg');
    margin:0px;
    }

#body {
    width:1000px;
    margin:0 auto 0 auto;
    }           

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

Here’s my html:

<div class="wrapper">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background">
    <div id="maincontent">
        <div id="body"></div>

        <div class="push"></div>
    </div>

    <div id="footer">
        <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p>
    </div>
</div>

Answer 1

Adding the footer is causing horizontal scrolling? Just an untested idea, but try adding

.wrapper {
    overflow: hidden;
}

and possibly

#footer {
    overflow: hidden;
}

in case there is something (margin/padding) overflowing outside the footer.