CSS - Usage of background-attachment

Question

I have read the manual of CSS background-attachment and never get the true idea. However, today I learn a lesson as follows:

.#city-images-div {
    background: url(../img/100.jpg) no-repeat fixed 0px 0px;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 557px;
    height: 374px;
    cursor: pointer;
    border: none;
}

<div id="city-images-div"></div>

The above code will not help me display the background image 100.jpg.

If I change the background-attachment from fix to scroll then the picture can be display. The dimension of the image is of 557x374.

I don't know why the background-attachment plays such a role here.

Q1> What is the practical usage of background-attachment

Q2> Why the image doesn't show up if the value is fixed and displays correctly if the value is scroll.

thank you

// update //
this is a typo and fix should be fixed.

Answer 1

There's a few practical uses of it, but I can't think of any at the moment.

As for why it's not working for you, it should be fixed, not fix.

Answer 2

I think that say you had a gradient background image (repeat-x and stuff) to make the page look nice.

If background-attachment is "fixed", then the gradient will scroll with that page, else, it stays at the top