CSS - Using Background Binding

Question

I read the CSS binding creation guide and never get a true idea. However, today I am learning the 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 code above will not help me display the background image 100.jpg.

If I changed the background binding from fix to scroll, then the image may be displayed. Image size is 557x374.

I don’t know why the background plays here here.

Q1> What is the practical use of background attachment

Q2> Why the image is not displayed if the value is fixed and displayed correctly if the value scrolls.

Thank you

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

Answer 1

There are several practical uses, but I can’t think of anyone at the moment.

, , fixed, fix.

Answer 2

, (repeat-x ), .

"", ,

Answer 3

"fixed" "fix"?

css, , , ( ) img. background, , ..

Answer 4

, snot fix, fixed.

Answer 5

I believe that the problem is that your Absolute Positioned block is installed at some distance from the upper left corner of the screen, far enough so that the image does not appear in the field at all. See if this demo helps: http://jsfiddle.net/9LLwX/2/

Try to drag the box. Note that the position of the background never changes, even if it moves divcontaining it. Backgrounds background-attachment: fixedare located relative to the viewport.