0

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>
1
  • please show us that page or add your code.
    – Tim
    Feb 2, 2012 at 10:57

4 Answers 4

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.

3
  • Great, thanks that solves the horizontal problem. The only problem I have now is that the footer sits below the background image and not on top of it.
    – Rob
    Feb 2, 2012 at 12:02
  • Try #footer{position:relative;} if that doesn't conflict with how you are using the footer already.
    – Supr
    Feb 2, 2012 at 12:13
  • 1
    I think I need to re-order the div's as the footer isn't actually within the background image div.
    – Rob
    Feb 2, 2012 at 13:42
0

Without seeing your code it's difficult to answer, but in firebug/webkit developer tools check the css overflow and other display properties on the html and body elements, and any other elements that wrap your content. It's probable there's an overflow: auto in there which needs setting to overflow:hidden;

2
  • most elements have overflow: auto as the default, so try setting overflow:hidden on body and html
    – wheresrhys
    Feb 2, 2012 at 11:31
  • Looking at your code, it could aslo be something to do with the styles on #mainContent and #body clashing in a weird way
    – wheresrhys
    Feb 2, 2012 at 11:43
0

Huh? Why are you going to that much trouble? You haven't given any code for analysis, but I presume you're after something like:

body {
    margin: 0;
    background: url(folderInRootDirectory/myimage.jpg) no-repeat center center;
    background-size: cover;
}

Or an alternative that doesn't use CSS3, for IE8 compatibility:

#bg_img {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    z-index: -99999999999999;
}
body {
    margin: 0;
    min-width: 100%;
    min-height: 100%;
}

Plus html:

<body>
    <img id="bg_img" src="MYURL.JPG" />
    <!-- content -->
</body>
4
  • I need it to work in IE8 so that rules out the first part of your answer. Also the second part to your answer just stretches an image to 100% width and height. The full screen background script keeps the aspect ratio of the image and makes it fill the screen, it's a very different result to do it your way.
    – Rob
    Feb 2, 2012 at 11:17
  • I presumed that was what you wanted with a "fullscreen" background image. Would you like the image to overflow, ie part hidden, or reduce size to fit the container?
    – lpd
    Feb 2, 2012 at 11:21
  • I've figured out it's the sticky footer that's creating the extra scrolling. If possible I'd like overflow:hidden; as that will just fill the browser window. I've added my code.
    – Rob
    Feb 2, 2012 at 11:23
  • I updated the first part of my answer, although I just tested the second part of my answer in both Chrome and IE and neither distorted the aspect ratio. The image was enlarged on the smallest axis to take the available space, and the overflow on the perpendicular axis was hidden...
    – lpd
    Feb 2, 2012 at 11:31
0

Try this mate for body element,

* {
    margin: 0;
    padding: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    outline: 0 none;
    vertical-align: baseline;
}
body {
    color: #404040;
}

body {
    background: url("../design/bg.gif") repeat-x scroll 0 0 #FFFFFF;
    font: 0.8em/1.5 "arial",sans-serif;
}
1
  • 1
    Cheers but again I don't think that'll work as there's nothing there to resize the background image and keep it's aspect ratio.
    – Rob
    Feb 2, 2012 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.