Can anyone tell me what this line of code is doing.

background: #fff url(../images/skin1/body_back.jpg) repeat-y 0px 0px;

I understand everything up to the 0px 0px after the repeat. What is this bit controlling?

1 answer


It's a short-hand version of the following:

foo {
    background-color: #fff;
    background-image: url(../images/skin1/body_back.jpg);
    background-repeat: repeat-y;
    background-position: 0 0; /* X Y */

You can shuffle them around somewhat, like putting the background-repeat last instead.

So to answer your question, it's defining where the background should be positioned. But in this case it isn't needed there because the default position of any background-image is X: 0 Y: 0. This value can specified in either pixels, percentages or keywords. Common keywords are center, top, bottom, left, right.

The keyword center could be a little confusing as it is the same for centering in both the X and Y axis. In background positioning there is no middle keyword (which is commonly used when using vertical-align for tables and images).

The center keyword actually means: backgroundImageCenterRegistrationPoint = elementWidth / 2 (or elementHeight).

Answered over 7 years ago by Jens Hedqvist