Grow your CSS skills. Land your dream job.

background image – overflow puzzle

  • # February 22, 2011 at 7:40 pm

    Hi,

    http://www.paulstroudmusic.co.uk/BASE/index.html

    If you take a look at the page above you’ll see that the 1010px wide image sits 15% from the left of its container div. If the page width is less than this no scroll bars appear – and this is what I want.

    However, if you narrow the browser window to less than the box under the word “TEST”, then scroll right, you’ll see that the upper background image doesn’t continue

    After much experimentation and hunting around for an answer, I’m hoping one of you might throw some light on the problem

    Thanks

    # February 22, 2011 at 7:44 pm

    Sorry – have this too :)

    Markup




    CSS

    * {
    margin: 0;
    padding: 0;
    }
    body {
    font: 14px/1.4 Georgia, serif;
    background-color:black;

    }
    article, aside, figure, footer, header, nav, section {
    display: block;
    }

    nav {
    color:white;
    text-align:center;
    font-size:100px;
    }
    #page-wrap {
    margin: 50px auto;
    background-color:black;
    }
    #theHeader{
    }
    #fullHeader {
    position:relative;
    /*background:url(../images/header-bg.jpg);*/
    background-color:#C93;
    height:400px;
    overflow:hidden;
    }


    #centerHeaderBg {
    height:400px;
    background:url(../images/header-main-bg.jpg);
    background-repeat:repeat-x;
    background-position:top;
    position:absolute;
    left:15%;
    margin:auto;
    min-width:1010px;
    min-height:50%;

    }
    # February 22, 2011 at 7:52 pm

    I’m confused as to what is even the matter. No ones browser window is only going to be a couple hundred wide. No one will ever run into this problem.

    # February 22, 2011 at 7:55 pm

    Are you talking about the tan or black?

    p.s. I’m pretty sure you can condense half of your divs

    # February 22, 2011 at 8:44 pm

    The black. The tan area will be a repeated background image – it’s tan for illustration purposes.

    re:ps -Yeah – theHeader is certainly surplus. But there is stuff in the markup I’ve deliberately taken out of the CSS.

    @noahgelman – You’re right but that box under “TEST” could be closer to a 980px blog post when I’m done with the rest of the page.

    Also, on a zoomed-in browser the “cut-off” is perhaps worse.

    I just feel that I’ve gone about this all wrong

    # February 22, 2011 at 10:36 pm

    I just feel that I’ve gone about this all wrong
    I feel you may have also, but given the information you’ve shared a solution is to place min-width: 700px on the body

    The div being cut off has a width of auto which defaults to 100% of the body (minus margin, border, and padding). The body is viewport width, so when the viewport is smaller than 700px (the width of the lower div), the div in question also is smaller – including its background, even when scrolled.

    # February 23, 2011 at 6:34 am

    Thanks wolfcry – that works fine. It would be nice to get it “right” though. I don’t have a problem with starting again with this.

    Could someone be kind enough to suggest a better way to construct this?

    # February 23, 2011 at 8:21 am

    Do you have a better example of what you’re trying to accomplish? Why is the banner 15% from the left and the rest of the content centered? Perhaps what you have actually is the best way, but it just seems a bit odd (realizing of course that you’re page is just a testbed).

    # February 23, 2011 at 9:51 am

    Yeah – it seems fine. May be I should just leave it like this and move on.

    The reason for the 15% is that there are other elements that have different relationships with the wrap div.

    Thanks very much for your time.

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

You must be logged in to reply to this topic.

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