Grow your CSS skills. Land your dream job.

[Solved] Large Background Not Displaying Correctly in IE7

  • # December 30, 2009 at 12:58 pm

    Hello

    I’m trying to implement the large background technique, featured here :
    http://css-tricks.com/perfect-full-page … und-image/

    to the following page:
    http://sideradesign.com/ryan/

    But in IE7, the background image does not appear correctly. there is a white area then the image starts in the middle of the browser window.

    I don’t have IE7 installed, but I saw this in IETester (very unstable) and Browsershots.

    maybe it’s the Mootools javascript that iis not working?

    thanks for any help

    Paul

    # December 30, 2009 at 9:32 pm

    I think the method you are trying to use is overkill -

    try this

    Code:
    body {

    background:#FFFFFF url(/site_background.jpg) no-repeat fixed center top;

    Then make sure the background image is large enough to cover the max resolution you’d like to support – For example 2560 by 1600.

    # December 31, 2009 at 5:05 am

    thanks for the suggestion andrews, but I’d really like to get this working

    # December 31, 2009 at 11:18 am
    Code:
    .index #content .primary .primary {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(../images/homebg.png) no-repeat left top;
    display:inline;
    float:left;
    height:374px;
    margin-top:-20px;
    padding:0;
    width:782px;
    }

    Well, I agree with andrews. But My idea to get that working would be to make a

    Code:

    statment. And add the following code the the ie7.css file:

    Code:
    .index #content .primary .primary {
    margin: -20px 0 0 -500px;
    }
    # January 2, 2010 at 4:56 pm

    thank you both, I changed it to the simpler method that you mentioned

    paul

    # January 2, 2010 at 6:28 pm

    looks good!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".