Grow your CSS skills. Land your dream job.

repeat-y not staying centered

  • # January 27, 2010 at 5:41 pm

    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.

    # January 27, 2010 at 6:45 pm

    Looks perfect here in FF3.5 on Win XP.

    What browser are you experiencing the problem in?

    # January 27, 2010 at 7:05 pm

    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:

    Code:
    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

    Code:
    background-position: top center;

    to

    Code:
    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

    # January 28, 2010 at 4:35 am

    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!

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

You must be logged in to reply to this topic.

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