¿Funciona el fondo de pantalla completa con pie de página adhesivo?

Estoy usando este 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 este 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.

Este es mi 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;
}

Aquí está mi 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="/es/home" title="Home">Home</a> | <a href="/es/about" title="About">About</a></p>
    </div>
</div>

preguntado el 02 de febrero de 12 a las 10:02

please show us that page or add your code. -

4 Respuestas

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

.wrapper {
    overflow: hidden;
}

y posiblemente

#footer {
    overflow: hidden;
}

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

Respondido 02 Feb 12, 15:02

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. - Robar

Trata #footer{position:relative;} if that doesn't conflict with how you are using the footer already. - Supr

I think I need to re-order the div's as the footer isn't actually within the background image div. - Robar

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;

Respondido 02 Feb 12, 14:02

most elements have overflow: auto as the default, so try setting overflow:hidden on body and html - whereresrhys

Looking at your code, it could aslo be something to do with the styles on #mainContent and #body clashing in a weird way - whereresrhys

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>

Respondido 02 Feb 12, 15:02

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. - Robar

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

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. - Robar

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

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

Respondido 02 Feb 12, 16:02

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. - Robar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.