Question

I have a background image, that is simply a wrapper for the main content of my page.

I have set this image a background image like:

#background {
    background: url("../image/bg.png") repeat-y 133px 50px;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}

I would have thought that this would position the image 133px from the left and 50px from the top, but it is flush against the top of the browser.

Can anyone shed any light on why this is doing this?

Thanks

Can this kind of position be done when the image has repeat-y?

Thanks

Answer 1

You are using repeat-y so the background is repeated vertically, both down and up. The value you specified – 50px – is the place where the original background starts, but if your background has a height of 50px, you will not notice the difference as it is repeated above it as well.