treehouse : what would you like to learn today?
Web Design Web Development iOS Development

repeat-y not staying centered

  • Hiya,

    Really sorry if this is a fairly dense question (css noob), but as you make the browser window smaller on my blog, a repeat-y section doesn't move in the same way as the rest of the page. I should mention the only thing different on the div is that i have a position:relative as I need to push the text up into the area (top:-50px) of the blog header (as that contains a background image which would otherwise mess up this).

    Please see:

    http://www.djave.co.uk/blog.php

    and you can find my css just here

    http://www.djave.co.uk/css/style.css

    First post! eek, and that site is brand new so be gentle if you have any comments. Many thanks in advance, I love this site, glad to be involved in the forums.
  • Looks perfect here in FF3.5 on Win XP.

    What browser are you experiencing the problem in?
  • I can see what you mean on Safari 4 on the Mac

    To fix it, I removed the following 2 properties from the blogBody CSS:

    	
    padding-left: 150px;
    padding-right: 150px;


    as well as one which web developer called background-position-x:50% which I can only assume means change
    background-position: top center;


    to

    background-position: top;


    It looks right on Safari when I do this, although you may need separate styles sheets if the problem does not occur on all browsers
  • Thanks so much : ) That has pretty much done it!!

    There is only one thing, now it still happens but much, MUCH less, due to the glow behind my background image (due to my background image itself) - does repeat-y automatically stop at the left hand side of the image, or is there still away to center it?

    I'm very happy though - so thanks!