Positioning -Repeat-Y

[chickentulip]

Hello,

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.

[noahgelman]

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;
}

[jamygolden]

Do you have an example page?

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

should work.

[Chris Coyier]

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” =)

[chickentulip]

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.

[Author]

Posts