Treehouse: Grow your CSS skills. Land your dream job.

Positioning -Repeat-Y

  • # October 8, 2010 at 8:16 pm


    I was wondering if someone could tell me if it is possible to achieve what i want with the help of CSS. I want to place a background image along the right side of body. However, I don’t want the background to start from the very top but 100px lower.

    So far, my code looks like this and I dont know how to change it to achieve the result I want.

    body {

    background-image: url(image.png);
    background-position: right top;
    background-repeat: repeat-y;

    I tried to replace “top” in the above code with “100px” , but it did not work.

    # October 8, 2010 at 11:45 pm

    Thats because you have the top and right backwards I think. And you can combine it all on one line. Try this.

    body {
    background: url(image.png) 100px right repeat-y;

    # October 9, 2010 at 3:11 am

    Do you have an example page?

    body{background: url(image.png) repeat-y right 100px;}

    should work.

    # October 9, 2010 at 4:55 am

    I don’t think it’s possible. The trick will be to use another element inside the main element which is pushed down 100px and set the background image on that. It’s little CSS shortcomings like this which brought on “divitus” =)

    # October 9, 2010 at 9:51 am

    body{background: url(image.png) repeat-y right 100px;} -unfortunately is not working. I was just trying to make a vertical parallax effect on my web-site with two background images on the right-(tree branches). Anyway, what I will probably do, is to increase the canvas for my foreground by 100px on the top. The same idea works perfectly fine with horizontal parallax as described by Andy Budd in CSS mastery book.

    Thank you, everyone.

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

You must be logged in to reply to this topic.